<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>快应用入门小结篇 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="快应用,">
  

  <meta name="description" content="MD原文件 https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/quick-app-summary.md 博客链接 http://blog.poetries.top/2018/08/21/quick-app-summary/   前言与微信小程序的比较 二者都采用前端技术栈，快应用是native 渲染，性能">
<meta name="keywords" content="快应用">
<meta property="og:type" content="article">
<meta property="og:title" content="快应用入门小结篇">
<meta property="og:url" content="http://blog.poetries.top/2018/08/21/quick-app-summary/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="MD原文件 https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/quick-app-summary.md 博客链接 http://blog.poetries.top/2018/08/21/quick-app-summary/   前言与微信小程序的比较 二者都采用前端技术栈，快应用是native 渲染，性能">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/405.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/406.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/407.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/408.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/409.png">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/1480597-70b55809168cd48a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://bbs.quickapp.cn/data/attachment/forum/201812/15/182933kudoghhmnj8vc4ms.png">
<meta property="og:image" content="https://bbs.quickapp.cn/data/attachment/forum/201812/12/143505moccppi1ofo6b16a.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/410.png">
<meta property="og:updated_time" content="2020-08-15T04:25:31.930Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="快应用入门小结篇">
<meta name="twitter:description" content="MD原文件 https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/quick-app-summary.md 博客链接 http://blog.poetries.top/2018/08/21/quick-app-summary/   前言与微信小程序的比较 二者都采用前端技术栈，快应用是native 渲染，性能">
<meta name="twitter:image" content="https://poetries1.gitee.io/img-repo/2019/10/405.png">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#前言"><span class="toc-text">前言</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#与微信小程序的比较"><span class="toc-text">与微信小程序的比较</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#快应用入口"><span class="toc-text">快应用入口</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#快应用优点"><span class="toc-text">快应用优点</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#一、环境搭建"><span class="toc-text">一、环境搭建</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-1-安装NodeJS"><span class="toc-text">1.1 安装NodeJS</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-2-安装hap-toolkit"><span class="toc-text">1.2 安装hap-toolkit</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-3-创建项目工程"><span class="toc-text">1.3 创建项目工程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-4-连接手机进行调试"><span class="toc-text">1.4 连接手机进行调试</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-5-安装Hap-Extension"><span class="toc-text">1.5 安装Hap Extension</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#二、快应用结构分析"><span class="toc-text">二、快应用结构分析</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#2-1-文件组织"><span class="toc-text">2.1 文件组织</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-2-源码文件"><span class="toc-text">2.2 源码文件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-3-manifest配置"><span class="toc-text">2.3 manifest配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-4-app-ux"><span class="toc-text">2.4 app.ux</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-5-style样式"><span class="toc-text">2.5 style样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-6-template模板"><span class="toc-text">2.6 template模板</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-7-script脚本"><span class="toc-text">2.7 script脚本</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-7-1-模块声明"><span class="toc-text">2.7.1 模块声明</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-7-2-对象"><span class="toc-text">2.7.2 对象</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-7-2-1-页面级组件"><span class="toc-text">2.7.2.1 页面级组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-7-2-2-自定义组件"><span class="toc-text">2.7.2.2 自定义组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-7-2-3-公共对象"><span class="toc-text">2.7.2.3 公共对象</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-7-2-4-应用对象"><span class="toc-text">2.7.2.4 应用对象</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-7-2-5-页面对象"><span class="toc-text">2.7.2.5 页面对象</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-7-3-方法"><span class="toc-text">2.7.3 方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-7-3-1-数据方法"><span class="toc-text">2.7.3.1 数据方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-7-3-2-公共方法"><span class="toc-text">2.7.3.2 公共方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-7-3-3-事件方法"><span class="toc-text">2.7.3.3 事件方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-7-3-4-应用方法"><span class="toc-text">2.7.3.4 应用方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-7-3-5-页面方法"><span class="toc-text">2.7.3.5 页面方法</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-8-指令"><span class="toc-text">2.8 指令</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#三、生命周期"><span class="toc-text">三、生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#3-1-APP的生命周期"><span class="toc-text">3.1 APP的生命周期</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-2-页面生命周期"><span class="toc-text">3.2 页面生命周期</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#四、置顶对象"><span class="toc-text">四、置顶对象</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#五、全局对象"><span class="toc-text">五、全局对象</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#六、元素属性方法"><span class="toc-text">六、元素属性方法</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#七、页面设计"><span class="toc-text">七、页面设计</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#八、组件"><span class="toc-text">八、组件</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#九、页面切换和参数传递"><span class="toc-text">九、页面切换和参数传递</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#9-1-参数传递"><span class="toc-text">9.1 参数传递</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-2-页面间通信"><span class="toc-text">9.2 页面间通信</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十、组件通信"><span class="toc-text">十、组件通信</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十一、Deeplink"><span class="toc-text">十一、Deeplink</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十二、事件监听与触发"><span class="toc-text">十二、事件监听与触发</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十三、打包及发布"><span class="toc-text">十三、打包及发布</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#13-1-编译工具"><span class="toc-text">13.1 编译工具</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-2-IDE发布"><span class="toc-text">13.2 IDE发布</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十四、快应用分享专题"><span class="toc-text">十四、快应用分享专题</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十五、上传到快应用中心审核"><span class="toc-text">十五、上传到快应用中心审核</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十六、一些问题"><span class="toc-text">十六、一些问题</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十七、快应用开发资源"><span class="toc-text">十七、快应用开发资源</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#官方资讯"><span class="toc-text">官方资讯</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#官方文档"><span class="toc-text">官方文档</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#工具"><span class="toc-text">工具</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#示例"><span class="toc-text">示例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#插件"><span class="toc-text">插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#教程"><span class="toc-text">教程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#讨论"><span class="toc-text">讨论</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#分享"><span class="toc-text">分享</span></a></li></ol></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-quick-app-summary" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">快应用入门小结篇</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2018.08.21</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 12k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 51分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <blockquote>
<ul>
<li>MD原文件 <a href="https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/quick-app-summary.md" target="_blank" rel="noopener">https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/quick-app-summary.md</a></li>
<li>博客链接 <a href="http://blog.poetries.top/2018/08/21/quick-app-summary/">http://blog.poetries.top/2018/08/21/quick-app-summary/</a></li>
</ul>
</blockquote>
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><h2 id="与微信小程序的比较"><a href="#与微信小程序的比较" class="headerlink" title="与微信小程序的比较"></a>与微信小程序的比较</h2><ul>
<li>二者都采用前端技术栈，快应用是<code>native</code> 渲染，性能体验会比较好，而小程序目前是<code>webview</code>渲染</li>
<li>二者开发框架和规范不同，所以代码写法上有差异，快应用的<code>css</code>支持能力较弱</li>
<li>快应用基于<code>native</code>，可以调起丰富的系统api，小程序在此方面会有些无力</li>
</ul>
<h2 id="快应用入口"><a href="#快应用入口" class="headerlink" title="快应用入口"></a>快应用入口</h2><ul>
<li>应用商店</li>
<li>桌面图标</li>
<li>全局搜索</li>
<li>浏览器搜索</li>
<li>网页跳转</li>
<li>负一屏</li>
<li>智能推送</li>
<li>智慧识屏</li>
<li>场景化入口（短信按钮、应用卸载替换、二维码、传送门）</li>
</ul>
<h2 id="快应用优点"><a href="#快应用优点" class="headerlink" title="快应用优点"></a>快应用优点</h2><ul>
<li>轻松调起更多系统api</li>
<li>各厂商的流量扶持</li>
<li><code>native</code>渲染，<code>deeplink</code>入口，原生桌面入口，<code>push</code>能力</li>
</ul>
<h1 id="一、环境搭建"><a href="#一、环境搭建" class="headerlink" title="一、环境搭建"></a>一、环境搭建</h1><h2 id="1-1-安装NodeJS"><a href="#1-1-安装NodeJS" class="headerlink" title="1.1 安装NodeJS"></a>1.1 安装NodeJS</h2><blockquote>
<p>需安装<code>6.0</code>以上版本的<code>NodeJS</code></p>
</blockquote>
<h2 id="1-2-安装hap-toolkit"><a href="#1-2-安装hap-toolkit" class="headerlink" title="1.2 安装hap-toolkit"></a>1.2 安装hap-toolkit</h2><figure class="highlight shell"><table><tr><td class="code"><pre><span class="line">// hap -V // 会显示安装版本信息</span><br><span class="line">npm install -g hap-toolkit</span><br></pre></td></tr></table></figure>
<h2 id="1-3-创建项目工程"><a href="#1-3-创建项目工程" class="headerlink" title="1.3 创建项目工程"></a>1.3 创建项目工程</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">hap init projectName</span><br><span class="line"></span><br><span class="line">// 增加编译支持</span><br><span class="line">hap update --force</span><br><span class="line"></span><br><span class="line">cd projectName &amp;&amp; npm i</span><br></pre></td></tr></table></figure>
<p>生成的目录结构</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">├── sign rpk <span class="comment">//包签名模块</span></span><br><span class="line">│ └── debug <span class="comment">//调试环境</span></span><br><span class="line">│ ├── certificate.pem <span class="comment">//证书文件</span></span><br><span class="line">│ └── private.pem <span class="comment">//私钥文件</span></span><br><span class="line">├── src</span><br><span class="line">│ ├── Common <span class="comment">//公用的资源和组件文件</span></span><br><span class="line">│ │ └── logo.png <span class="comment">//应用图标</span></span><br><span class="line">│ ├── Demo <span class="comment">//页面目录</span></span><br><span class="line">│ | └── index.ux <span class="comment">//页面文件，可自定义页面名称</span></span><br><span class="line">│ ├── app.ux <span class="comment">//APP文件，可引入公共脚本，暴露公共数据和方法等</span></span><br><span class="line">│ └── manifest.json <span class="comment">//项目配置文件，配置应用图标、页面路由等</span></span><br><span class="line">└── package.json <span class="comment">//定义项目需要的各种模块及配置信息</span></span><br></pre></td></tr></table></figure>
<ul>
<li><code>src</code>：项目源文件夹</li>
<li><code>sign</code>：签名模块，当前仅有<code>debug</code>签名，如果内测上线，请添加<code>release</code>文件夹，增加线上签名；签名生成方法详见文档编译工具</li>
</ul>
<p><strong>编译项目</strong></p>
<ul>
<li><code>npm run release</code>     # 发布程序包，在 <code>/dist/.signed.rpk</code>，注意需要使用 <code>release</code> 签名模块</li>
<li><code>npm run build</code>      # 生成 <code>build</code> 和 <code>dist</code> 两个目录。前者是临时产出，后者是最终产出</li>
<li><code>npm run watch</code>      # 文件保存时自动编译和调试</li>
</ul>
<p>手动编译项目</p>
<blockquote>
<p>在项目的根目录下，运行如下命令进行编译打包，生成rpk包</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>
<ul>
<li>编译打包成功后，项目根目录下会生成文件夹：<code>build</code>、<code>dist</code></li>
<li><code>build</code>：临时产出，包含编译后的页面js，图片等</li>
<li><code>dist</code>：最终产出，包含<code>rpk</code>文件。其实是将<code>build</code>目录下的资源打包压缩为一个文件，后缀名为<code>rpk</code>，这个<code>rpk</code>文件就是项目编译后的最终产出</li>
</ul>
<p>自动编译项目</p>
<ul>
<li>每次修改源代码文件后，都自动编译项目</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm run watch</span><br></pre></td></tr></table></figure>
<p><strong>在安卓手机上安装调试工具</strong></p>
<blockquote>
<p><a href="https://www.quickapp.cn/docCenter/post/69" target="_blank" rel="noopener">https://www.quickapp.cn/docCenter/post/69</a></p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/405.png" alt></p>
<h2 id="1-4-连接手机进行调试"><a href="#1-4-连接手机进行调试" class="headerlink" title="1.4 连接手机进行调试"></a>1.4 连接手机进行调试</h2><blockquote>
<p>注意：一定要注意手机连接的wifi与电脑所连接的网络需要在同一局域网和网段，需要能够相互访问。</p>
</blockquote>
<ul>
<li>在项目根目录下执行如下命令，启动HTTP调试服务器：（<code>server</code>前需要先<code>npm run build</code>）</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm run server</span><br></pre></td></tr></table></figure>
<ul>
<li>开发者可以通过命令行终端或者调试服务器主页看到提供扫描的二维码</li>
<li>开发者通过快应用调试器扫码安装按钮，扫码安装待调试的<code>rpk</code>文件</li>
<li>开发者点击快应用调试器中的开始调试按钮，开始调试</li>
</ul>
<blockquote>
<p>打开之前安装的快应用调试助手扫描即可预览</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/406.png" alt></p>
<blockquote>
<p>扫描二维码之后点击开始调试，会调出devtool工具本地调试</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/407.png" alt><br><img src="https://poetries1.gitee.io/img-repo/2019/10/408.png" alt></p>
<h2 id="1-5-安装Hap-Extension"><a href="#1-5-安装Hap-Extension" class="headerlink" title="1.5 安装Hap Extension"></a>1.5 安装Hap Extension</h2><blockquote>
<p>启动Visual Studio Code，打开项目，点击左上侧扩展，搜索hap，点击安装Hap Extension</p>
</blockquote>
<ul>
<li>更多详情 <a href="https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html" target="_blank" rel="noopener">https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html</a></li>
</ul>
<h1 id="二、快应用结构分析"><a href="#二、快应用结构分析" class="headerlink" title="二、快应用结构分析"></a>二、快应用结构分析</h1><h2 id="2-1-文件组织"><a href="#2-1-文件组织" class="headerlink" title="2.1 文件组织"></a>2.1 文件组织</h2><blockquote>
<p>一个应用包含：描述项目配置信息的<code>manifest</code>文件，放置项目公共资源脚本的<code>app.ux</code>文件，多个描述页面/自定义组件的ux文件</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">├── sign                            rpk包签名模块</span><br><span class="line">    └── debug                       调试环境</span><br><span class="line">            └── certificate.pem     证书文件</span><br><span class="line">            └── private.pem         私钥文件</span><br><span class="line">├── src</span><br><span class="line">   ├── Common                       公用的资源和组件文件</span><br><span class="line">            └──logo.png             应用图标</span><br><span class="line">   ├── Demo                         页面目录</span><br><span class="line">            └── index.ux            页面文件，可自定义页面名称</span><br><span class="line">   ├── app.ux               APP文件，可引入公共脚本，暴露公共数据和方法等</span><br><span class="line">   └── manifest.json                项目配置文件，配置应用图标、页面路由等</span><br><span class="line">└── package.json                    定义项目需要的各种模块及配置信息</span><br></pre></td></tr></table></figure>
<p><strong>目录的简要说明如下</strong></p>
<ul>
<li><code>src</code>：项目源文件夹</li>
<li><code>sign</code>：签名模块（当前仅有<code>debug</code>签名，如果内测上线，请添加<code>release</code>文件夹，增加线上签名）</li>
</ul>
<h2 id="2-2-源码文件"><a href="#2-2-源码文件" class="headerlink" title="2.2 源码文件"></a>2.2 源码文件</h2><blockquote>
<p><code>APP</code>，页面和自定义组件均通过<code>ux</code>文件编写，<code>ux</code>文件由<code>template</code>模板、<code>style</code>样式和<code>script</code>脚本3个部分组成，一个典型的页面<code>ux</code>文件示例如下</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- template里只能有一个根节点 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"demo-page"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"title"</span>&gt;</span>欢迎打开&#123;&#123;title&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 点击跳转详情页 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">class</span>=<span class="string">"btn"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"跳转到详情页"</span> <span class="attr">onclick</span>=<span class="string">"routeDetail"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.demo-page</span> &#123;</span></span><br><span class="line">    flex-direction: column;</span><br><span class="line">    justify-content: center;</span><br><span class="line">    align-items: center;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">  <span class="selector-class">.title</span> &#123;</span></span><br><span class="line">    font-size: 40px;</span><br><span class="line">    text-align: center;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"><span class="css">  <span class="selector-class">.btn</span> &#123;</span></span><br><span class="line">    width: 550px;</span><br><span class="line">    height: 86px;</span><br><span class="line">    margin-top: 75px;</span><br><span class="line">    border-radius: 43px;</span><br><span class="line"><span class="css">    <span class="selector-tag">background-color</span>: <span class="selector-id">#09ba07</span>;</span></span><br><span class="line">    font-size: 30px;</span><br><span class="line"><span class="css">    <span class="selector-tag">color</span>: <span class="selector-id">#ffffff</span>;</span></span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">'@system.router'</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="comment">// 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖</span></span></span><br><span class="line">    private: &#123;</span><br><span class="line"><span class="javascript">      title: <span class="string">'示例页面'</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    routeDetail () &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 跳转到应用内的某个页面，router用法详见：文档-&gt;接口-&gt;页面路由</span></span></span><br><span class="line">      router.push (&#123;</span><br><span class="line"><span class="javascript">        uri: <span class="string">'/DemoDetail'</span></span></span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="2-3-manifest配置"><a href="#2-3-manifest配置" class="headerlink" title="2.3 manifest配置"></a>2.3 manifest配置</h2><blockquote>
<p><a href="https://doc.quickapp.cn/framework/manifest.html" target="_blank" rel="noopener">https://doc.quickapp.cn/framework/manifest.html</a></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    # 包名，区分不同应用的唯一id，因为名称其实是可以一样的</span><br><span class="line">    <span class="string">"package"</span>: <span class="string">"com.application.demo"</span>,</span><br><span class="line"></span><br><span class="line">    # 应用名称</span><br><span class="line">    <span class="string">"name"</span>: <span class="string">"hi"</span>,</span><br><span class="line"></span><br><span class="line">    # 版本管理的话，每次更新将versionCode自增1即可</span><br><span class="line">    <span class="string">"versionName"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">    <span class="string">"versionCode"</span>: <span class="string">"1"</span>,</span><br><span class="line">    <span class="string">"minPlatformVersion"</span>: <span class="string">"101"</span>,</span><br><span class="line"></span><br><span class="line">    # 程序的入口icon，所有关于文件的引用统一使用根目录</span><br><span class="line">    # 根目录对应src文件夹</span><br><span class="line">    <span class="string">"icon"</span>: <span class="string">"/Common/logo.png"</span>,</span><br><span class="line"></span><br><span class="line">    # </span><br><span class="line">    <span class="string">"features"</span>: [</span><br><span class="line">        &#123; <span class="string">"name"</span>: <span class="string">"system.prompt"</span> &#125;,</span><br><span class="line">        &#123; <span class="string">"name"</span>: <span class="string">"system.router"</span> &#125;,</span><br><span class="line">        &#123; <span class="string">"name"</span>: <span class="string">"system.shortcut"</span> &#125;</span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    <span class="string">"permissions"</span>: [</span><br><span class="line">        &#123; <span class="string">"origin"</span>: <span class="string">"*"</span> &#125;</span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    # 配置相关</span><br><span class="line">    <span class="string">"config"</span>: &#123;</span><br><span class="line">        # 这里的设置是log输出的最低等级</span><br><span class="line">        # 如果是warn的话，info类型将不会输出</span><br><span class="line">        # 等级请参考js中的console日志</span><br><span class="line">        <span class="string">"logLevel"</span>: <span class="string">"off"</span></span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    # 路由</span><br><span class="line">    # 这里会配置应用入口的页面</span><br><span class="line">    # 所有的页面都需要在这里配置</span><br><span class="line">    # 会把页面与对应的页面文件对应起来</span><br><span class="line">    # 经过配置之后可以通过/Demo访问到Demo目录下的index.ux页面</span><br><span class="line">    <span class="string">"router"</span>: &#123;</span><br><span class="line">        <span class="string">"entry"</span>: <span class="string">"Demo"</span>,</span><br><span class="line">        <span class="string">"pages"</span>: &#123;</span><br><span class="line">            <span class="string">"Demo"</span>: &#123;</span><br><span class="line">                # 这里对应的Demo文件夹里的index.ux</span><br><span class="line">                <span class="string">"component"</span>: <span class="string">"index"</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="string">"DemoDetail"</span>: &#123;</span><br><span class="line">                <span class="string">"component"</span>: <span class="string">"index"</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="string">"About"</span>: &#123;</span><br><span class="line">                <span class="string">"component"</span>: <span class="string">"index"</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    </span><br><span class="line">    # 配置页面UI显示</span><br><span class="line">    # 主要分为两种，页面公有与页面私有</span><br><span class="line">    <span class="string">"display"</span>: &#123;</span><br><span class="line">        # 这三个都是所有页面公有的，顶部titleBar内容</span><br><span class="line">        <span class="string">"titleBarText"</span>: <span class="string">"public title"</span></span><br><span class="line">        <span class="string">"titleBarBackgroundColor"</span>: <span class="string">"#f2f2f2"</span>,</span><br><span class="line">        <span class="string">"titleBarTextColor"</span>: <span class="string">"#414141"</span>,</span><br><span class="line"></span><br><span class="line">        # 会增加一个导航栏</span><br><span class="line">        <span class="string">"menu"</span>: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">        # 页面私有内容</span><br><span class="line">        <span class="string">"pages"</span>: &#123;</span><br><span class="line">            <span class="string">"Demo"</span>: &#123;</span><br><span class="line">                # 这里面的内容就是每个页面私有的了</span><br><span class="line">                <span class="string">"titleBarText"</span>: <span class="string">"示例页"</span>,</span><br><span class="line">                <span class="string">"menu"</span>: <span class="literal">false</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="string">"DemoDetail"</span>: &#123;</span><br><span class="line">                <span class="string">"titleBarText"</span>: <span class="string">"详情页"</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="string">"About"</span>: &#123;</span><br><span class="line">                <span class="string">"menu"</span>: <span class="literal">false</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><code>package</code> 应用包名，确认与原生应用的包名不一致，推荐采用<code>com.company.module</code>的格式，如：<code>com.example.demo</code></li>
<li><code>name</code> 应用名称，6个汉字以内，与应用商店保存的名称一致，用于在桌面图标、弹窗等处显示应用名称</li>
<li><code>icon</code> 应用图标，提供<code>192x192</code>大小的即可</li>
<li><code>versionName</code> 应用版本名称，如：<code>&quot;1.0&quot;</code></li>
<li><code>versionCode</code> 应用版本号，从1自增，推荐每次重新上传包时<code>versionCode+1</code></li>
<li><code>minPlatformVersion</code> 支持的最小平台版本号，兼容性检查，避免上线后在低版本平台运行并导致不兼容；如果不填按照内测版本处理</li>
<li><code>features</code> 接口列表，绝大部分接口都需要在这里声明，否则不能调用，详见每个接口的文档说明</li>
<li><code>config</code> 系统配置<ul>
<li><code>logLevel</code>：打印日志等级，分为<code>off</code>,<code>error</code>,<code>warn</code>,<code>info</code>,<code>log</code>,<code>debug</code></li>
<li><code>designWidth</code>：页面设计基准宽度，根据实际设备宽度来缩放元素大小</li>
</ul>
</li>
<li><code>router</code> 路由信息 <ul>
<li><code>entry:</code>首页名称</li>
<li><code>pages</code>:页面配置列表，<code>key</code>值为页面名称（对应页面目录名，例如Hello对应’Hello’目录），<code>value</code>为页面详细配置<code>page</code>，详见下面说明</li>
<li><code>router.page</code> 用于定义单个页面路由信息<ul>
<li><code>component</code>: 页面对应的组件名，与<code>ux</code>文件名保持一致，例如<code>&#39;hello&#39;</code> 对应 <code>&#39;hello.ux&#39;</code></li>
<li><code>path</code> 页面路径，例如<code>“/user”</code>,不填则默认为/&lt;页面名称&gt;。<code>path</code>必须唯一,不能和其他<code>page</code>的<code>path</code>相同。下面<code>page</code>的<code>path</code>因为缺失,会被设置为<code>“/Index”</code>：<code>&quot;Index&quot;</code>: <code>{&quot;component&quot;: &quot;index&quot;}</code></li>
<li><code>filter</code>: 声明页面可以处理某种请求</li>
</ul>
</li>
</ul>
</li>
<li><code>display UI</code>显示相关配置<ul>
<li><code>backgroundColor</code> 窗口背景颜色</li>
<li><code>fullScreen</code> 是否是全屏模式，默认不会同时作用于<code>titleBar</code>，<code>titleBar</code>需要继续通过<code>titleBar</code>控制</li>
<li><code>titleBar</code> 是否显示<code>titleBar</code></li>
<li><code>titleBarBackgroundColor</code>标题栏背景色</li>
<li><code>titleBarTextColor</code> 标题栏文字颜色</li>
<li><code>titleBarText</code> 标题栏文字(也可通过页面跳转传递参数(<code>titleBarText</code>)设置)</li>
<li><code>menu</code> 是否显示标题栏右上角菜单按钮</li>
<li><code>pages</code> 各个页面的显示样式，key为页面名（与路由中的页面名保持一致），<code>value</code>为窗口显示</li>
</ul>
</li>
</ul>
<h2 id="2-4-app-ux"><a href="#2-4-app-ux" class="headerlink" title="2.4 app.ux"></a>2.4 app.ux</h2><blockquote>
<p>当前<code>app.ux</code>编译后会包含<code>manifest</code>配置信息（可以在<code>npm run build</code>之后查看文件内容），所以请不要删除<code>/**manifest**/</code>的注释内容标识</p>
</blockquote>
<ul>
<li>您可以在<code>&lt;script&gt;</code>中引入一些公共的脚本，并暴露在当前app的对象上，如下所示，然后就可以在页面ux文件的<code>ViewModel</code>中，通过<code>this.$app.util</code>访问</li>
</ul>
<h2 id="2-5-style样式"><a href="#2-5-style样式" class="headerlink" title="2.5 style样式"></a>2.5 style样式</h2><ul>
<li>样式布局采用<code>CSS Flexbox</code>（弹性盒）样式</li>
</ul>
<blockquote>
<p>支持2种导入外部文件的方式</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 导入外部文件, 代替style内部样式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">src</span>=<span class="string">"./style.css"</span>&gt;</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 合并外部文件 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="keyword">@import</span> <span class="string">'./style.css'</span>;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.a</span> &#123;</span></span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>模板内部样式</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 内联inline --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"color:red; margin: 10px;"</span>/&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- class声明 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"normal append"</span>/&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>样式预编译</strong></p>
<blockquote>
<p>目前支持less, sass的预编译</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!--导入外部文件, 代替style内部样式--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"less"</span> <span class="attr">src</span>=<span class="string">"./lessFile.less"</span>&gt;</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--合并外部文件--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"less"</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="keyword">@import</span> <span class="string">'./lessFile.less'</span>;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.page-less</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="selector-id">#testTag</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-class">.less-font-text</span>, <span class="selector-class">.less-font-comma</span> &#123;</span></span><br><span class="line">        font-size: 60px;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line">  /**</span><br><span class="line">   * 应用级别的配置，供所有页面公用</span><br><span class="line">   */</span><br><span class="line"><span class="javascript">  <span class="keyword">import</span> util <span class="keyword">from</span> <span class="string">'./util'</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    showMenu: util.showMenu,</span><br><span class="line">    createShortcut: util.createShortcut</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="2-6-template模板"><a href="#2-6-template模板" class="headerlink" title="2.6 template模板"></a>2.6 template模板</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- temp.ux --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">import</span> <span class="attr">name</span>=<span class="string">"hint"</span> <span class="attr">src</span>=<span class="string">"./hint-modal"</span>&gt;</span><span class="tag">&lt;/<span class="name">import</span>&gt;</span>  <span class="comment">&lt;!-- 引入外部模板 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">import</span> <span class="attr">src</span>=<span class="string">"./table"</span>&gt;</span><span class="tag">&lt;/<span class="name">import</span>&gt;</span>  <span class="comment">&lt;!-- 引入外部模板 --&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mod-header"</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"mod-title"</span> <span class="attr">style</span>=<span class="string">"color: red; margin: 10px;"</span>&gt;</span>&#123;&#123;title&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span>    <span class="comment">&lt;!-- 行内样式 --&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"mod-detail"</span> <span class="attr">onclick</span>=<span class="string">"showDetail"</span>&gt;</span>?<span class="tag">&lt;/<span class="name">text</span>&gt;</span>    <span class="comment">&lt;!-- 无参事件绑定 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"mod-content"</span>&gt;</span></span><br><span class="line">          <span class="comment">&lt;!-- block 用来表示逻辑，不渲染 --&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">block</span> <span class="attr">for</span>=<span class="string">"totalData"</span>&gt;</span>   <span class="comment">&lt;!-- for 循环遍历数组 $idx, $item 分别为数组的索引和值--&gt;</span></span><br><span class="line">              <span class="comment">&lt;!-- 事件绑定 --&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span> <span class="attr">onclick</span>=<span class="string">"onTabClick($idx)"</span> <span class="attr">class</span>=<span class="string">"item &#123;&#123;tabIndex === $idx &amp;&amp; 'active'&#125;&#125;"</span>&gt;</span> <span class="comment">&lt;!-- 支持简单表达式 --&gt;</span></span><br><span class="line">                  <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"&#123;&#123;tabIndex === $idx &amp;&amp; 'text-active'&#125;&#125;"</span>&gt;</span>&#123;&#123;($item || &#123;&#125;).name&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">                  <span class="tag">&lt;<span class="name">text</span> <span class="attr">class</span>=<span class="string">"&#123;&#123;tabIndex === $idx &amp;&amp; 'text-active'&#125;&#125;"</span>&gt;</span>&#123;&#123;($item || &#123;&#125;).value&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span>  <span class="comment">&lt;!-- 布尔值、null、undefined、'' 不渲染，其余包括 falsy 值一律渲染 --&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">block</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">image</span> <span class="attr">class</span>=<span class="string">"mod-like"</span> <span class="attr">if</span>=<span class="string">"&#123;&#123;isLike&#125;&#125;"</span> /&gt;</span> <span class="comment">&lt;!-- 支持if elif else, 必须是相邻节点 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">image</span> <span class="attr">class</span>=<span class="string">"mod-dislike"</span> <span class="attr">else</span> /&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">table</span> <span class="attr">data</span>=<span class="string">&#123;&#123;dataList&#125;&#125;</span>&gt;</span><span class="tag">&lt;/<span class="name">table</span>&gt;</span>  <span class="comment">&lt;!-- 传入属性值，使用外部模板--&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">hint</span> <span class="attr">show</span>=<span class="string">"&#123;&#123;isHintShown&#125;&#125;"</span>&gt;</span></span><br><span class="line">          This is children of hint templete.</span><br><span class="line">      <span class="tag">&lt;/<span class="name">hint</span>&gt;</span>   <span class="comment">&lt;!-- 使用外部模板 --&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- if 和 show 的区别：if 为 false 分支的节点不会渲染进 DOM 树，而 show 为 false 的节点会渲染，只是 display: none; --&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"less"</span> <span class="attr">src</span>=<span class="string">"./lessFile.less"</span>&gt;</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span>   <span class="comment">&lt;!-- 引入外部 CSS/LESS --&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"less"</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="comment">/* 引入外部 CSS/LESS */</span></span></span><br><span class="line"><span class="css">  <span class="keyword">@import</span> <span class="string">'../Common/global.less'</span>;</span></span><br><span class="line"></span><br><span class="line"><span class="css">  <span class="selector-class">.container</span>&#123;</span></span><br><span class="line"><span class="css">    <span class="comment">/* 定义样式，less 支持 */</span></span></span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">import</span> fetch <span class="keyword">from</span> <span class="string">"@system.fetch"</span>    <span class="comment">// 引入系统 js</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">import</span> conf <span class="keyword">from</span> <span class="string">'./globalConf'</span>;     <span class="comment">// 引入外部 js</span></span></span><br><span class="line">  </span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">    props: [<span class="string">'title'</span>, <span class="string">'dataList'</span>],  <span class="comment">// 传入属性：必须字母开头，全小写、数字和 `-` ，不能保留字和函数，不能以符号开头</span></span></span><br><span class="line">    public: &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 定义变量，会被 props 和内部请求覆盖</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    private: &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 定义变量，不会被 props 覆盖</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    protected: &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 定义变量，不会被 props 覆盖, 但会被内部请求覆盖(获得通过 a 标签和 router 传递的参数)</span></span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="javascript">    data :&#123;   <span class="comment">// data 不能和 public、private、protected 一起使用，data 也可以是 function（返回 data 对象，onInit之前执行）</span></span></span><br><span class="line"><span class="javascript">      <span class="comment">// 定义变量：不能保留字和函数，不能以符号开头</span></span></span><br><span class="line"><span class="javascript">      totalData: [&#123;<span class="attr">name</span>: <span class="string">'a'</span>,<span class="attr">value</span>: <span class="number">97</span>&#125;,&#123;<span class="attr">name</span>: <span class="string">'b'</span>,<span class="attr">value</span>: <span class="number">98</span>&#125;];</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 定义变量，会被 props 覆盖</span></span></span><br><span class="line">    &#125;,</span><br><span class="line"><span class="javascript">    onTabClick(index)&#123;    <span class="comment">// 内部事件定义</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(index);</span></span><br><span class="line">    &#125;,</span><br><span class="line">    events: &#123;</span><br><span class="line">       onIDChange()&#123;</span><br><span class="line"><span class="javascript">          <span class="comment">// 外部事件定义</span></span></span><br><span class="line">       &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- hint.ux --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">text</span>&gt;</span><span class="tag">&lt;<span class="name">slot</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span><span class="tag">&lt;/<span class="name">text</span>&gt;</span>          <span class="comment">&lt;!-- slot: 获取该数据的引用的 children, 该例中即：This is children of hint templete. --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="2-7-script脚本"><a href="#2-7-script脚本" class="headerlink" title="2.7 script脚本"></a>2.7 script脚本</h2><h3 id="2-7-1-模块声明"><a href="#2-7-1-模块声明" class="headerlink" title="2.7.1 模块声明"></a>2.7.1 模块声明</h3><blockquote>
<p>可以通过<code>import</code>引入功能模块，在代码中调用模块方法</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">import fetch from &quot;@system.fetch&quot;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>也可以一次引入所有的模块，例如</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">import system from &quot;@system&quot;</span><br></pre></td></tr></table></figure>
<ul>
<li>在代码中使用<code>system.network</code>来调用接口方法</li>
</ul>
<h3 id="2-7-2-对象"><a href="#2-7-2-对象" class="headerlink" title="2.7.2 对象"></a>2.7.2 对象</h3><h4 id="2-7-2-1-页面级组件"><a href="#2-7-2-1-页面级组件" class="headerlink" title="2.7.2.1 页面级组件"></a>2.7.2.1 页面级组件</h4><p><strong>data(废弃)</strong></p>
<ul>
<li>页面级组件的数据模型，能够转换为<code>JSON</code>对象</li>
<li>如果是函数，返回结果必须是对象，在组件初始化时会执行函数获取结果作为<code>data</code>的值</li>
<li>使用<code>data</code>方式声明的属性会被外部数据覆盖，因此存在一定安全风险，推荐使用下面的<code>public</code>,<code>protected</code>,<code>rivate</code>来声明属性（注意：它们不能与data同时声明）</li>
</ul>
<p><strong>public</strong></p>
<blockquote>
<p>页面级组件的数据模型，影响传入数据的覆盖机制：<code>public</code>内定义的属性允许被传入的数据覆盖，如果外部传入数据的某个属性未被声明，在<code>public</code>中不会新增这个属性</p>
</blockquote>
<p><strong>protected</strong></p>
<blockquote>
<p>页面级组件的数据模型，影响传入数据的覆盖机制：protected内定义的属性，允许被应用内部页面请求传递的数据覆盖，不允许被应用外部请求传递的数据覆盖</p>
</blockquote>
<p><strong>private</strong></p>
<blockquote>
<p>页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">   props: [<span class="string">'title'</span>, <span class="string">'dataList'</span>],  <span class="comment">// 传入属性：必须字母开头，全小写、数字和 `-` ，不能保留字和函数，不能以符号开头</span></span><br><span class="line">   public: &#123;</span><br><span class="line">     <span class="comment">// 定义变量，会被 props 和内部请求覆盖</span></span><br><span class="line">   &#125;,</span><br><span class="line">   private: &#123;</span><br><span class="line">     <span class="comment">// 定义变量，不会被 props 覆盖</span></span><br><span class="line">   &#125;,</span><br><span class="line">   protected: &#123;</span><br><span class="line">     <span class="comment">// 定义变量，不会被 props 覆盖, 但会被内部请求覆盖(获得通过 a 标签和 router 传递的参数)</span></span><br><span class="line">   &#125;</span><br><span class="line">   data :&#123;   <span class="comment">// data 不能和 public、private、protected 一起使用，data 也可以是 function（返回 data 对象，onInit之前执行）</span></span><br><span class="line">     <span class="comment">// 定义变量：不能保留字和函数，不能以符号开头</span></span><br><span class="line">     totalData: [&#123;<span class="attr">name</span>: <span class="string">'a'</span>,<span class="attr">value</span>: <span class="number">97</span>&#125;,&#123;<span class="attr">name</span>: <span class="string">'b'</span>,<span class="attr">value</span>: <span class="number">98</span>&#125;];</span><br><span class="line">       <span class="comment">// 定义变量，会被 props 覆盖</span></span><br><span class="line">   &#125;,</span><br><span class="line">   onTabClick(index)&#123;    <span class="comment">// 内部事件定义</span></span><br><span class="line">     <span class="built_in">console</span>.log(index);</span><br><span class="line">   &#125;,</span><br><span class="line">   events: &#123;</span><br><span class="line">      onIDChange()&#123;</span><br><span class="line">         <span class="comment">// 外部事件定义</span></span><br><span class="line">      &#125;</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<h4 id="2-7-2-2-自定义组件"><a href="#2-7-2-2-自定义组件" class="headerlink" title="2.7.2.2 自定义组件"></a>2.7.2.2 自定义组件</h4><p><strong>data</strong></p>
<blockquote>
<p>自定义组件的数据模型，能够转换为JSON对象；属性名不能以$或_开头, 不要使用for, if, show, tid等保留字<br>如果是函数，返回结果必须是对象，在组件初始化时会执行函数获取结果作为data的值</p>
</blockquote>
<p><strong>props</strong></p>
<ul>
<li>定义组件外部可传入的所有属性</li>
<li>在模板代码中，请使用短横线分隔命名代替驼峰命名。如，属性定义<code>props: [&#39;propA&#39;]</code>，可通过<code>&lt;tag prop-a=&#39;xx&#39;&gt;</code>方式传递到组件内部</li>
</ul>
<p><strong>prop验证</strong></p>
<blockquote>
<p>在自定义组件中，可将props定义为带验证需求的对象。其中，key为属性名，value为属性对应的验证需求。验证失败则输出错误提示日志，增加prop验证有利于规范自定义组件的使用</p>
</blockquote>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>type</code></td>
<td>-</td>
<td>检查属性值的类型。支持单一类型和多种可能类型，可在原生和自定义构造函数中任意选择，单独或组合使用。原生构造函数：<code>String</code>  <code>Number</code>  <code>Boolean</code>  <code>Function</code>  <code>Object</code>  <code>Array</code>  <code>Symbol</code></td>
</tr>
<tr>
<td><code>default</code></td>
<td>-</td>
<td>设置属性的默认值</td>
</tr>
<tr>
<td><code>required</code></td>
<td><code>Boolean</code></td>
<td>设置属性是否必填</td>
</tr>
</tbody>
</table>
<p><code>validator</code>|    <code>Function</code>|    设置自定义验证函数。若函数的返回值为真，则通过验证；否则验证失败|</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    props: &#123;</span><br><span class="line">      <span class="comment">// 单一类型检查的简写</span></span><br><span class="line">      propA: <span class="built_in">Number</span>,</span><br><span class="line">      <span class="comment">// 多种可能类型的简写</span></span><br><span class="line">      propB: [<span class="built_in">String</span>, <span class="built_in">Number</span>],</span><br><span class="line">      <span class="comment">// 必填的字符串</span></span><br><span class="line">      propC: &#123;</span><br><span class="line">        type: <span class="built_in">String</span>,</span><br><span class="line">        required: <span class="literal">true</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 带默认值的数字</span></span><br><span class="line">      propD: &#123;</span><br><span class="line">        type: <span class="built_in">Number</span>,</span><br><span class="line">        <span class="keyword">default</span>: <span class="number">100</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 带有默认值的对象</span></span><br><span class="line">      propE: &#123;</span><br><span class="line">        type: <span class="built_in">Object</span>,</span><br><span class="line">        <span class="keyword">default</span> () &#123;</span><br><span class="line">          <span class="keyword">return</span> &#123; <span class="attr">message</span>: <span class="string">'hello'</span> &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 自定义验证函数</span></span><br><span class="line">      propF: &#123;</span><br><span class="line">        validator (value) &#123;</span><br><span class="line">          <span class="keyword">return</span> value === <span class="string">'hello'</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h4 id="2-7-2-3-公共对象"><a href="#2-7-2-3-公共对象" class="headerlink" title="2.7.2.3 公共对象"></a>2.7.2.3 公共对象</h4><table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$app</code></td>
<td><code>Object</code></td>
<td>应用对象</td>
</tr>
<tr>
<td><code>$page</code></td>
<td><code>Object</code></td>
<td>页面对象</td>
</tr>
<tr>
<td><code>$valid</code></td>
<td><code>Boolean</code></td>
<td>页面对象是否有效</td>
</tr>
<tr>
<td><code>$visible</code></td>
<td><code>Boolean</code></td>
<td>页面是否处于用户可见状态</td>
</tr>
</tbody>
</table>
<h4 id="2-7-2-4-应用对象"><a href="#2-7-2-4-应用对象" class="headerlink" title="2.7.2.4 应用对象"></a>2.7.2.4 应用对象</h4><blockquote>
<p>可通过<code>$app</code>访问</p>
</blockquote>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$def</code></td>
<td><code>Object</code></td>
<td>使用<code>this.$app.$def</code>获取在<code>app.ux</code>中暴露的对象</td>
</tr>
<tr>
<td><code>$data</code></td>
<td><code>Object</code></td>
<td>使用<code>this.$app.$data</code>获取在<code>manifest.json</code>的<code>config.data</code>中声明的全局数据</td>
</tr>
</tbody>
</table>
<h4 id="2-7-2-5-页面对象"><a href="#2-7-2-5-页面对象" class="headerlink" title="2.7.2.5 页面对象"></a>2.7.2.5 页面对象</h4><blockquote>
<p>可通过<code>$page</code>访问</p>
</blockquote>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>actio</code>n</td>
<td><code>String</code></td>
<td>获取打开当前页面的<code>action</code>。仅在当前页面是通过<code>filter</code>匹配的方式打开时有效，否则为<code>undefined</code></td>
</tr>
<tr>
<td><code>uri</code></td>
<td><code>String</code></td>
<td>获取打开当前页面的uri。仅在当前页面是通过filter匹配的方式打开时有效，否则为<code>undefined</code></td>
</tr>
</tbody>
</table>
<h3 id="2-7-3-方法"><a href="#2-7-3-方法" class="headerlink" title="2.7.3 方法"></a>2.7.3 方法</h3><h4 id="2-7-3-1-数据方法"><a href="#2-7-3-1-数据方法" class="headerlink" title="2.7.3.1 数据方法"></a>2.7.3.1 数据方法</h4><table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>参数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$set</code></td>
<td><code>Function</code></td>
<td><code>key: String value: Any</code></td>
<td>添加数据属性，用法<code>：this.$set(&#39;key&#39;,value)</code> <code>this.$vm(&#39;id&#39;).$set(&#39;key&#39;,value)</code></td>
</tr>
<tr>
<td><code>$delete</code></td>
<td><code>Function</code></td>
<td><code>key: String</code></td>
<td>删除数据属性，用法：<code>this.$delete(&#39;key&#39;)</code> <code>this.$vm(&#39;id&#39;).$delete(&#39;key&#39;)</code></td>
</tr>
</tbody>
</table>
<h4 id="2-7-3-2-公共方法"><a href="#2-7-3-2-公共方法" class="headerlink" title="2.7.3.2 公共方法"></a>2.7.3.2 公共方法</h4><table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$element</code></td>
<td>获取指定<code>id</code>的组件<code>dom</code>对象，如果没有指定<code>id</code>，则返回根组件<code>dom</code>对象用法：<code>&lt;template&gt; &lt;div id=&#39;xxx&#39;&gt;&lt;/div&gt; &lt;/template&gt; this.$element(&#39;xxx&#39;)</code> 获取<code>id</code>为<code>xxx</code>的<code>div</code>组件实例对象 <code>this.$element()</code> 获取根组件实例对象</td>
</tr>
<tr>
<td><code>$root</code></td>
<td>获取顶层<code>ViewModel</code></td>
</tr>
<tr>
<td><code>$parent</code></td>
<td>获取父亲<code>ViewModel</code></td>
</tr>
<tr>
<td><code>$child</code></td>
<td>获取指定<code>id</code>的自定义组件的<code>ViewModel</code>用法：<code>this.$child(&#39;xxx&#39;)</code> 获取<code>id</code>为<code>xxx</code>的<code>div</code>组件<code>ViewModel</code></td>
</tr>
<tr>
<td><code>$vm deprecated</code></td>
<td>请使用上面<code>this.$child(&#39;xxx&#39;)</code>替代</td>
</tr>
<tr>
<td><code>$rootElement deprecated</code></td>
<td>请使用上面<code>this.$element()</code>替代</td>
</tr>
<tr>
<td><code>$forceUpdate</code></td>
<td>更新<code>ViewModel</code>数据，可能会触发<code>DOM</code>操作，如：创建节点、更新节点、删除节点等；这些DOM操作不一定在数据更新时立即执行，而是在开发者的业务代码执行后触发；若开发者期望数据更新时立即执行相应的<code>DOM</code>操作，可使用：<code>this.$forceUpdate()</code>；一般不推荐使用</td>
</tr>
</tbody>
</table>
<h4 id="2-7-3-3-事件方法"><a href="#2-7-3-3-事件方法" class="headerlink" title="2.7.3.3 事件方法"></a>2.7.3.3 事件方法</h4><table>
<thead>
<tr>
<th>属性</th>
<th>参数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$on</code></td>
<td><code>type: String</code> 事件名 <br><code>handler: Function</code>事件句柄函数</td>
<td>添加事件处理句柄用法：<code>this.$on(&#39;xxxx&#39;, this.fn)</code> <code>fn</code>是在<code>&lt;script&gt;</code>中定义的函数</td>
</tr>
<tr>
<td><code>$off</code></td>
<td><code>type: String</code> 事件名 <br><code>handler</code>:  事件句柄函数</td>
<td>删除事件处理句柄用法：<code>this.$off(&#39;xxxx&#39;, this.fn)</code> <code>this.$off(&#39;xxx&#39;)</code> 删除指定事件的所有处理句柄</td>
</tr>
<tr>
<td><code>$dispatch</code></td>
<td><code>type: String</code> 事件名</td>
<td>向上层组件发送事件通知用法：<code>this.$dispatch(&#39;xxx&#39;)</code>正常情况下，会一直向上传递事件（冒泡）如果要停止冒泡，在事件句柄函数中调用<code>evt.stop()</code>即可</td>
</tr>
<tr>
<td><code>$broadcast</code></td>
<td><code>type: String</code> 事件名</td>
<td>向子组件发送事件通知用法：<code>this.$broadcast(&#39;xxx&#39;)</code>正常情况下，会一直向下传递事件如果要停止传递，在事件句柄函数中调用<code>evt.stop()</code>即可</td>
</tr>
<tr>
<td><code>$emit</code></td>
<td><code>type: String</code> 事件名 <br><code>data: Object</code> 事件参数</td>
<td>触发事件，对应的句柄函数被调用用法：<code>this.$emit(&#39;xxx&#39;) this.$emit(&#39;xxx&#39;, {a:1})</code>传递的事件参数可在事件回调函数中，通过<code>evt.detail</code>来访问，例如<code>evt.detail.a</code></td>
</tr>
<tr>
<td><code>$emitElement</code></td>
<td><code>type: String</code> 事件名<br><code>data: Object</code> 事件参数 <br><code>id: String</code> 组件<code>id</code> (默认为<code>-1</code> 代表根元素)</td>
<td>触发组件事件,对应的句柄函数被调用用法：<code>this.$emitElement(&#39;xxx&#39;, null, &#39;id&#39;) this.$emitElement(&#39;xxx&#39;,{a:1})</code>传递的事件参数可在事件回调函数中，通过<code>evt.detail</code>来访问，例如<code>evt.detail.a</code></td>
</tr>
<tr>
<td><code>$watch</code></td>
<td><code>data: String</code> 属性名, 支持<code>&#39;a.b.c&#39;</code>格式，不支持数组索引 <br><code>handler: String</code> 事件句柄函数名,函数的第一个参数为新的属性值，第二个参数为旧的属性值</td>
<td>动态添加属性/事件绑定，属性必须在<code>data</code>中定义，<code>handler</code>函数必须在<code>&lt;script&gt;</code>定义；当属性值发生变化时事件才被触发用法：<code>this.$watch(&#39;a&#39;,&#39;handler&#39;)</code></td>
</tr>
</tbody>
</table>
<h4 id="2-7-3-4-应用方法"><a href="#2-7-3-4-应用方法" class="headerlink" title="2.7.3.4 应用方法"></a>2.7.3.4 应用方法</h4><blockquote>
<p>可通过$app访问</p>
</blockquote>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>exit</td>
<td>退出快应用，结束应用生命周期。<br>调用方法：<code>this.$app.exit()</code></td>
</tr>
</tbody>
</table>
<h4 id="2-7-3-5-页面方法"><a href="#2-7-3-5-页面方法" class="headerlink" title="2.7.3.5 页面方法"></a>2.7.3.5 页面方法</h4><blockquote>
<p>可通过<code>$page</code>访问</p>
</blockquote>
<table>
<thead>
<tr>
<th>属性</th>
<th>参数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>setTitleBar</code></td>
<td><code>text: String</code> 标题栏文字 <br><code>textColor: String</code> 文字颜色 <br><code>backgroundColor: String</code> 背景颜色 <br><code>backgroundOpacity : Number</code>背景透明度 <br><code>menu : Boolean</code> 是否在标题栏右上角显示菜单按钮</td>
<td>设置当前页面的标题栏用法：<code>this.$page.setTitleBar({text:&#39;Hello&#39;, textColor:&#39;#FF0000&#39;, backgroundColor:&#39;#FFFFFF&#39;, backgroundOpacity:0.5, menu: true})</code></td>
</tr>
<tr>
<td><code>finish</code></td>
<td>无</td>
<td>从本页面退出，结束页面生命周期。调用方法：<code>this.$page.finish()</code></td>
</tr>
</tbody>
</table>
<h2 id="2-8-指令"><a href="#2-8-指令" class="headerlink" title="2.8 指令"></a>2.8 指令</h2><p><strong>for</strong></p>
<blockquote>
<p><code>for</code>指令用于循环输出一个数组类型的数据</p>
</blockquote>
<ul>
<li>自定义变量表示<code>for</code>指令的数组索引和数组元素时，变量名不可以用<code>$</code>或<code>_</code>开头；</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tutorial-page"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 方式1：默认$item代表数组中的元素, $idx代表数组中的索引 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tutorial-row"</span> <span class="attr">for</span>=<span class="string">"&#123;&#123;list&#125;&#125;"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">text</span>&gt;</span>&#123;&#123;$idx&#125;&#125;.&#123;&#123;$item.name&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 方式2：自定义元素变量名称 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tutorial-row"</span> <span class="attr">for</span>=<span class="string">"value in list"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">text</span>&gt;</span>&#123;&#123;$idx&#125;&#125;.&#123;&#123;value.name&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 方式3：自定义元素、索引的变量名称 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tutorial-row"</span> <span class="attr">for</span>=<span class="string">"(personIndex, personItem) in list"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">text</span>&gt;</span>&#123;&#123;personIndex&#125;&#125;.&#123;&#123;personItem.name&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"less"</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.tutorial-page</span> &#123;</span></span><br><span class="line">    flex-direction: column;</span><br><span class="line"><span class="css">    <span class="selector-class">.tutorial-row</span> &#123;</span></span><br><span class="line">      width: 85%;</span><br><span class="line">      margin-top: 10px;</span><br><span class="line">      margin-bottom: 10px;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    private: &#123;</span><br><span class="line">      list: [</span><br><span class="line"><span class="javascript">        &#123;<span class="attr">name</span>: <span class="string">'aa'</span>&#125;,</span></span><br><span class="line"><span class="javascript">        &#123; <span class="attr">name</span>: <span class="string">'bb'</span> &#125;</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;,</span><br><span class="line">    onInit () &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$page.setTitleBar(&#123; <span class="attr">text</span>: <span class="string">'指令for'</span> &#125;)</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>指令if与指令show</strong></p>
<ul>
<li><code>if</code>条件指令，是指<code>if/elif/else</code>这3个相关指令，用于控制是否增加或者删除组件；</li>
<li><code>show</code>指令，是指是否显示组件，用于控制组件的显示状态，并不会从DOM结构中删除</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tutorial-page"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"onClickShow"</span>&gt;</span>显示隐藏：<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">show</span>=<span class="string">"&#123;&#123;showVar&#125;&#125;"</span>&gt;</span>show: 渲染但控制是否显示<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"onClickCondition"</span>&gt;</span>条件指令：<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">if</span>=<span class="string">"&#123;&#123;conditionVar === 1&#125;&#125;"</span>&gt;</span>if: if条件<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">elif</span>=<span class="string">"&#123;&#123;conditionVar === 2&#125;&#125;"</span>&gt;</span>elif: elif条件<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">else</span>&gt;</span>else: 其余<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"less"</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.tutorial-page</span> &#123;</span></span><br><span class="line">    flex-direction: column;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    private: &#123;</span><br><span class="line"><span class="javascript">      showVar: <span class="literal">true</span>,</span></span><br><span class="line">      conditionVar: 1</span><br><span class="line">    &#125;,</span><br><span class="line">    onInit () &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$page.setTitleBar(&#123; <span class="attr">text</span>: <span class="string">'指令if与指令show'</span> &#125;)</span></span><br><span class="line">    &#125;,</span><br><span class="line">    onClickShow () &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.showVar = !<span class="keyword">this</span>.showVar</span></span><br><span class="line">    &#125;,</span><br><span class="line">    onClickCondition () &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.conditionVar = ++<span class="keyword">this</span>.conditionVar % <span class="number">3</span></span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>当<code>if/elif</code>指令的值为<code>false</code>时，节点会从页面中移除，当<code>if/elif</code>指令值为<code>true</code>，组件会动态插入节点中；</li>
<li>当<code>show</code>指令的值为<code>true</code>时，节点可见， - 当其值为<code>false</code>时，组件不可见，但节点仍会保留在页面DOM结构中</li>
</ul>
<p><strong>组件block</strong></p>
<blockquote>
<p>block组件是表达逻辑区块的组件，没有对应的Native组件。可以使用<block>实现更为灵活的”列表/条件渲染”。如在<block>上使用for指令和if指令</block></block></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tutorial-page"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"toggleCityList"</span>&gt;</span>点击：控制是否显示城市<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"city"</span> <span class="attr">for</span>=<span class="string">"city in cities"</span> <span class="attr">if</span>=<span class="string">"&#123;&#123;showCityList === 1&#125;&#125;"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">text</span>&gt;</span>城市：&#123;&#123;city.name&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">block</span> <span class="attr">if</span>=<span class="string">"&#123;&#123;city.showSpots&#125;&#125;"</span> <span class="attr">for</span>=<span class="string">"&#123;&#123;city.spots&#125;&#125;"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">text</span>&gt;</span>景点：&#123;&#123;$item.name&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">block</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"less"</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.tutorial-page</span> &#123;</span></span><br><span class="line">    flex-direction: column;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="css">  <span class="selector-class">.city</span> &#123;</span></span><br><span class="line">    flex-direction: column;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">import</span> &#123;dataDirective&#125; <span class="keyword">from</span> <span class="string">'../../Common/js/data'</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    private: &#123;</span><br><span class="line">      showCityList: 1,</span><br><span class="line">      cities: dataDirective</span><br><span class="line">    &#125;,</span><br><span class="line">    onInit () &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$page.setTitleBar(&#123; <span class="attr">text</span>: <span class="string">'组件block'</span> &#125;)</span></span><br><span class="line">    &#125;,</span><br><span class="line">    toggleCityList () &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.showCityList = <span class="keyword">this</span>.showCityList === <span class="number">1</span> ? <span class="number">0</span> : <span class="number">1</span></span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>组件slot</strong></p>
<blockquote>
<p>slot节点用于向开发者额外开发的自定义ux组件中插入内容</p>
</blockquote>
<ul>
<li>通常自定义组件的模板中提供<code>slot</code>组件，当该组件被引入到页面组件中后，开发者可以灵活定义该自定义组件内部的子内容</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">//自定义组件part1.ux</span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- par1.ux --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span>&gt;</span>&#123;&#123; header &#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">slot</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span>&gt;</span>&#123;&#123; footer &#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    props: [</span><br><span class="line"><span class="javascript">      <span class="string">'header'</span>, <span class="string">'footer'</span></span></span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">//自定义组件使用者页面index.ux</span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- index.ux --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">import</span> <span class="attr">src</span>=<span class="string">"./part1"</span>&gt;</span><span class="tag">&lt;/<span class="name">import</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">part1</span> <span class="attr">class</span>=<span class="string">"component"</span> <span class="attr">header</span>=<span class="string">"&#123;&#123;header&#125;&#125;"</span> <span class="attr">footer</span>=<span class="string">"&#123;&#123;footer&#125;&#125;"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span>&gt;</span>slot节点内容<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">part1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.component</span> &#123;</span></span><br><span class="line">    flex-direction: column;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    private: &#123;</span><br><span class="line"><span class="javascript">      header: <span class="string">'HEAD'</span>,</span></span><br><span class="line"><span class="javascript">      footer: <span class="string">'FOOT'</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    onInit () &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$page.setTitleBar(&#123; <span class="attr">text</span>: <span class="string">'组件slot'</span> &#125;)</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>在子组件中使用<code>slot</code>组件，使得子组件接纳调用者传入的子内容，从而动态渲染子组件，得到最终的页面</p>
</blockquote>
<h1 id="三、生命周期"><a href="#三、生命周期" class="headerlink" title="三、生命周期"></a>三、生命周期</h1><h2 id="3-1-APP的生命周期"><a href="#3-1-APP的生命周期" class="headerlink" title="3.1 APP的生命周期"></a>3.1 APP的生命周期</h2><blockquote>
<p>当前为APP的生命周期提供了两个回调函数：<code>onCreate</code>, <code>onDestroy</code>；可在<code>app.ux</code>中定义回调函数</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/409.png" alt></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  natives</span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">'./util/asyncNatives'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  onCreate () &#123;</span><br><span class="line">    <span class="built_in">console</span>.info(<span class="string">'Application onCreate'</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  onDestroy () &#123;</span><br><span class="line">    <span class="built_in">console</span>.info(<span class="string">'Application onDestroy'</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 暴露给所有页面，在页面中通过：this.$app.$def.method1()访问</span></span><br><span class="line">  method1 () &#123;</span><br><span class="line">    <span class="built_in">console</span>.info(<span class="string">'这是APP的方法'</span>)</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 暴露给所有页面，在页面中通过：this.$app.$def.data1访问</span></span><br><span class="line">  data1: &#123;</span><br><span class="line">    name: <span class="string">'这是APP存的数据'</span></span><br><span class="line">  &#125;,</span><br><span class="line">  natives</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>在<code>app.ux</code>中，开发者可以做一些独立于页面的操作。比如：引入公共的JS资源，然后暴露给所有页面</li>
<li>在<code>app.ux</code>中，通过<code>this.$def</code>访问<code>app.ux</code>中定义的数据和方法</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.info(<span class="string">`获取：APP文件中的数据：<span class="subst">$&#123;<span class="keyword">this</span>.$def.data1.name&#125;</span>`</span>)</span><br><span class="line"><span class="built_in">console</span>.info(<span class="string">`执行：APP文件中的方法`</span>, <span class="keyword">this</span>.$def.method1())</span><br><span class="line"><span class="built_in">console</span>.info(<span class="string">`获取：manifest.json的应用名称：<span class="subst">$&#123;<span class="keyword">this</span>.$def.manifest.name&#125;</span>`</span>)</span><br><span class="line"><span class="built_in">console</span>.info(<span class="string">`获取：manifest.json的config.data的数据：<span class="subst">$&#123;<span class="keyword">this</span>.$data.name&#125;</span>`</span>)</span><br></pre></td></tr></table></figure>
<blockquote>
<p>在<code>pageName.ux</code>中，通过<code>this.$app.$def</code>访问<code>app.ux</code>中定义的数据和方法</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">console</span>.info(<span class="string">`获取：APP文件中的数据：<span class="subst">$&#123;<span class="keyword">this</span>.$app.$def.data1.name&#125;</span>`</span>)</span><br><span class="line"><span class="built_in">console</span>.info(<span class="string">`执行：APP文件中的方法`</span>, <span class="keyword">this</span>.$app.$def.method1())</span><br><span class="line"><span class="built_in">console</span>.info(<span class="string">`获取：manifest.json的应用名称：<span class="subst">$&#123;<span class="keyword">this</span>.$app.$def.manifest.name&#125;</span>`</span>)</span><br><span class="line"><span class="built_in">console</span>.info(<span class="string">`获取：manifest.json的config.data的数据：<span class="subst">$&#123;<span class="keyword">this</span>.$app.$data.name&#125;</span>`</span>)</span><br></pre></td></tr></table></figure>
<p><strong>关于$app与$app.$def</strong></p>
<ul>
<li>前者代表框架为开发者暴露提供的APP对象；后者代表开发者在<code>app.ux</code>中导出的对象，放置业务相关的全局数据和方法</li>
<li>前者对象拥有<code>onCreate</code>, <code>onDestroy</code>生命周期；当应用启动时会执行<code>onCreate</code>方法，里面执行<code>this.variable1</code>的赋值是在<code>$app</code>对象上</li>
<li>后者对象中的<code>onCreate</code>, <code>onDestroy</code>方法并不会执行，作用仅仅只是把方法复制到前者对象上而已</li>
<li>这些全局方法在页面中：既可以通过<code>this.$app.method1()</code>调用，也可以通过<code>this.$app.$def.method1()</code>调用；不同之处在于前者可以取到之前赋值的<code>variable1</code>变量，而后者不可以取到（因为之前的赋值是在<code>$app</code>对象上执行的）</li>
</ul>
<h2 id="3-2-页面生命周期"><a href="#3-2-页面生命周期" class="headerlink" title="3.2 页面生命周期"></a>3.2 页面生命周期</h2><p><img src="https://upload-images.jianshu.io/upload_images/1480597-70b55809168cd48a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>
<p><strong>onInit()</strong></p>
<blockquote>
<p>表示ViewModel的数据已经准备好，可以开始使用页面中的数据</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">private: &#123;</span><br><span class="line">  <span class="comment">// 生命周期的文本列表</span></span><br><span class="line">  lcList: []</span><br><span class="line">&#125;,</span><br><span class="line">onInit () &#123;</span><br><span class="line">  <span class="keyword">this</span>.$page.setTitleBar(&#123; <span class="attr">text</span>: <span class="string">'生命周期'</span> &#125;)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">this</span>.lcList.push(<span class="string">'onInit'</span>)</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`触发：onInit`</span>)</span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`执行：获取ViewModel的lcList属性：<span class="subst">$&#123;<span class="keyword">this</span>.lcList&#125;</span>`</span>)   <span class="comment">// 执行：获取ViewModel的lcList属性：onInit</span></span><br><span class="line">  <span class="comment">// $app信息</span></span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`获取：manifest.json的config.data的数据：<span class="subst">$&#123;<span class="keyword">this</span>.$app.$data.name&#125;</span>`</span>)</span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`获取：APP文件中的数据：<span class="subst">$&#123;<span class="keyword">this</span>.$app.$def.data1.name&#125;</span>`</span>)</span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`执行：APP文件中的方法`</span>, <span class="keyword">this</span>.$app.$def.method1())</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>onReady()</strong></p>
<blockquote>
<p>表示ViewModel的模板已经编译完成，可以开始获取DOM节点（如：this.$element(idxxx)</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">onReady () &#123;</span><br><span class="line">  <span class="keyword">this</span>.lcList.push(<span class="string">'onReady'</span>)</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`触发：onReady`</span>)</span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`执行：获取模板节点：<span class="subst">$&#123;<span class="keyword">this</span>.$rootElement()&#125;</span>`</span>)   <span class="comment">// 执行：获取模板节点：&lt;div attr=&#123;&#125; style=&#123;"flexDirection":"column"&#125;&gt;...&lt;/div&gt;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>onShow(), onHide()</strong></p>
<blockquote>
<p>页面被切换隐藏时调用onHide()，页面被切换重新显示时调用onShow()</p>
</blockquote>
<ul>
<li>判断页面的显示状态，可以调用<code>ViewModel</code>的<code>$visible</code>属性：<code>true</code>表示显示，<code>false</code>表示隐藏</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">onShow () &#123;</span><br><span class="line">  <span class="keyword">this</span>.lcList.push(<span class="string">'onShow'</span>)</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`触发：onShow`</span>)</span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`执行：获取页面显示状态属性：<span class="subst">$&#123;<span class="keyword">this</span>.$visible&#125;</span>`</span>)  <span class="comment">// true</span></span><br><span class="line">&#125;,</span><br><span class="line">onHide () &#123;</span><br><span class="line">  <span class="keyword">this</span>.lcList.push(<span class="string">'onHide'</span>)</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`触发：onHide`</span>)</span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`执行：获取页面显示状态属性：<span class="subst">$&#123;<span class="keyword">this</span>.$visible&#125;</span>`</span>)  <span class="comment">// false</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>onDestroy()</strong></p>
<blockquote>
<p>页面被销毁时调用，被销毁的可能原因有：用户从当前页面返回到上一页，或者用户打开了太多的页面，框架自动销毁掉部分页面，避免占用资源</p>
</blockquote>
<ul>
<li>所以，页面销毁时应该做一些释放资源的操作，如：取消接口订阅监听<code>geolocation.unsubscribe()</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">onDestroy () &#123;</span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`触发：onDestroy`</span>)</span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`执行：页面要被销毁，销毁状态：<span class="subst">$&#123;<span class="keyword">this</span>.$valid&#125;</span>，应该做取消接口订阅监听的操作: geolocation.unsubscribe()`</span>)    <span class="comment">// true，即将销毁</span></span><br><span class="line">  setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.info(<span class="string">`执行：页面已被销毁，不会执行`</span>)                <span class="comment">// 页面已销毁，不会执行</span></span><br><span class="line">  &#125;.bind(<span class="keyword">this</span>), <span class="number">0</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>onBackPress()</strong></p>
<blockquote>
<p>当用户点击返回实体按键、左上角返回菜单、调用返回API时触发该事件</p>
</blockquote>
<ul>
<li>如果事件响应方法最后返回true表示不返回，自己处理业务逻辑（完毕后开发者自行调用API返回）；否则：不返回数据，或者返回其它数据：表示遵循系统逻辑：返回到上一页</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">onBackPress () &#123;</span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`触发：onBackPress`</span>)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// true：表示自己处理；否则默认返回上一页</span></span><br><span class="line">  <span class="comment">// return true</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>返回上一页的接口API：<code>router.back()</code></p>
</blockquote>
<p><strong>onMenuPress()</strong></p>
<blockquote>
<p>当使用原生的顶部标题栏时，可以通过manifest.json中的menu属性配置是否显示右上角的菜单</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">onMenuPress () &#123;</span><br><span class="line">  <span class="keyword">this</span>.lcList.push(<span class="string">'onMenuPress'</span>)</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.info(<span class="string">`触发：onMenuPress`</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>A页面的生命周期接口的调用顺序</strong></p>
<ul>
<li>打开页面A：<code>onInit()</code> -&gt; <code>onReady()</code> -&gt; <code>onShow()</code></li>
<li>在页面A打开页面B：<code>onHide()</code></li>
<li>从页面B返回页面A：<code>onShow()</code></li>
<li>A页面返回：<code>onBackPress() -&gt; onHide() -&gt; onDestroy()</code></li>
</ul>
<h1 id="四、置顶对象"><a href="#四、置顶对象" class="headerlink" title="四、置顶对象"></a>四、置顶对象</h1><ul>
<li><code>$app</code> 应用对象</li>
<li><code>$app.$def</code> 获取在<code>app.ux</code>中暴露的对象</li>
<li><code>$app.$data</code> 获取在<code>manifest.json</code>的<code>config.data</code>中声明的全局数据</li>
<li><code>$page</code> 页面对象</li>
<li><code>$page.action</code> 获取打开当前页面的<code>action</code>。仅在当前页面是通过<code>filter</code>匹配的方式打开时有效，否则为<code>undefined</code>。参见<code>manifest</code></li>
<li><code>$page.uri</code> 获取打开当前页面的<code>uri</code>。仅在当前页面是通过<code>filter</code>匹配的方式打开时有效，否则为<code>undefined</code></li>
<li><code>$page.setTitleBar</code> 设置页面标题</li>
<li><code>$valid</code> 页面对象是否有效</li>
<li><code>$visible</code> 页面是否处于用户可见状态</li>
</ul>
<blockquote>
<p><code>this.$page.setTitleBar</code> 参数属性包括</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  text: <span class="string">'Hello QuickApp'</span>,        <span class="comment">//标题栏文字</span></span><br><span class="line">  textColor: <span class="string">'#ffff'</span>,            <span class="comment">//文字颜色</span></span><br><span class="line">  backgroundColor: <span class="string">'#434343'</span>,    <span class="comment">//背景颜色</span></span><br><span class="line">  backgroundOpacity: <span class="string">'0.8'</span>,      <span class="comment">//背景透明度</span></span><br><span class="line">  menu: <span class="literal">false</span>,      <span class="comment">//是否在标题栏右上角显示菜单按钮 | 设置当前</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="五、全局对象"><a href="#五、全局对象" class="headerlink" title="五、全局对象"></a>五、全局对象</h1><ul>
<li><code>$element</code> 获取指定id的组件dom对象，如果没有指定id，则返回根组件<code>dom</code>对象用法：<code>this.$element(&#39;xxx&#39;)</code>获取id为xxx的组件实例对象 <code>this.$element()</code> 获取根组件实例对象</li>
<li><code>$root</code> 获取顶层<code>ViewModel</code></li>
<li><code>$parent</code> 获取父亲<code>ViewModel</code></li>
<li><code>$child</code> 获取指定id的自定义组件的<code>ViewModel</code>用法：<code>this.$child(&#39;xxx&#39;)</code> 获取<code>id</code>为<code>xxx</code>的<code>div</code>组件<code>ViewModel</code></li>
<li><code>$vm(弃用) 请使用上面</code>this.$child(‘xxx’)`替代</li>
<li><code>$forceUpdate</code> 强制页面刷新</li>
<li><code>$set</code> 添加数据属性，必须在<code>onInit</code>函数中使用，用法：<code>this.$set(&#39;key&#39;,value)</code></li>
<li><code>$delete</code> 删除数据属性，如果在<code>onInit</code>函数中使用，用法：<code>this.$delete(&#39;key&#39;)</code></li>
</ul>
<h1 id="六、元素属性方法"><a href="#六、元素属性方法" class="headerlink" title="六、元素属性方法"></a>六、元素属性方法</h1><blockquote>
<p>注意，获取元素应该在页面已渲染后，如 onReady 事件中或 onReady 事件执行完以后</p>
</blockquote>
<ul>
<li><code>$set</code> 添加数据属性，用法：<code>this.$vm(&#39;id&#39;).$set(&#39;key&#39;,value)</code></li>
<li><code>$delete</code>删除数据属性，用法：<code>this.$vm(&#39;id&#39;).$delete(&#39;key&#39;)</code></li>
<li><code>$on</code> 在当前页面注册监听事件， 可监听<code>$emit()</code>、 <code>$dispatch()</code>、 <code>$broadcast()</code>等触发的自定义事件，不能用于注册组件节点的事件响应</li>
<li><code>$off</code> 移除事件监听，参数 <code>fnHandler</code> 为可选，传递仅移除指定的响应函数，不传递则移除此事件的所有监听</li>
<li><code>$emit</code> 触发当前实例监听事件函数，与 <code>$on()</code> 配合使用</li>
</ul>
<h1 id="七、页面设计"><a href="#七、页面设计" class="headerlink" title="七、页面设计"></a>七、页面设计</h1><p><strong>布局和尺寸</strong></p>
<ul>
<li>采用<code>border-box</code> 模型且不支持 <code>box-sizing</code> 属性</li>
<li>目前仅支持长度单位<code>px</code>和<code>%</code></li>
<li>设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度(项目配置基准宽度:<code>/src/manifest.json</code> 中 <code>config.designWidth</code> 的值，默认<code>750</code>)</li>
</ul>
<p><strong>CSS</strong></p>
<ul>
<li>可以使用内联样式、<code>tag</code>选择器、<code>class</code>选择器、id选择器来为组件设置样式</li>
<li>仅可以使用并列选择、后代选择器、子代选择器</li>
<li>支持<code>@import</code>引入外部样式、内联样式、行内样式</li>
<li>颜色值不支持缩写，伪类支持不完全（支持<code>:disabled</code>,<code>:checked</code>,<code>:focus</code>等)</li>
</ul>
<h1 id="八、组件"><a href="#八、组件" class="headerlink" title="八、组件"></a>八、组件</h1><blockquote>
<p><code>&lt;text&gt;</code>、<code>&lt;a&gt;</code>、<code>&lt;span&gt;</code>、<code>&lt;label&gt;</code>组件为文本容器组件，其它组件不能直接放置文本内容</p>
</blockquote>
<p><strong><code>&lt;div&gt;</code>: 和 HTML 一样</strong></p>
<blockquote>
<p>支持样式 flex-direction, flex-wrap, justify-content, align-items, align-content</p>
</blockquote>
<p><strong><code>&lt;popup&gt;</code>: 气泡框</strong></p>
<ul>
<li>支持属性 <code>target</code> 和 <code>placement</code></li>
<li>支持样式 <code>mask-color</code></li>
<li>支持事件 <code>visibilitychange</code></li>
<li>自组件只能是<code>&lt;text&gt;</code></li>
</ul>
<p><strong><code>&lt;refresh&gt;</code>: 下拉刷新</strong></p>
<ul>
<li>支持属性 <code>offset</code>和 <code>refreshing</code></li>
<li>支持样式 <code>background-color</code> 和 <code>progress-color</code></li>
<li>支持事件 <code>refresh</code></li>
</ul>
<p><strong><code>&lt;richtext&gt;</code>: 富文本编辑器</strong></p>
<ul>
<li>支持属性 <code>type(值为 html)</code></li>
<li>支持<code>div</code>样式, <code>height</code> 无效</li>
<li>不支持子组件</li>
</ul>
<blockquote>
<p>更多详情 <a href="https://doc.quickapp.cn/widgets/div.html" target="_blank" rel="noopener">https://doc.quickapp.cn/widgets/div.html</a></p>
</blockquote>
<h1 id="九、页面切换和参数传递"><a href="#九、页面切换和参数传递" class="headerlink" title="九、页面切换和参数传递"></a>九、页面切换和参数传递</h1><h2 id="9-1-参数传递"><a href="#9-1-参数传递" class="headerlink" title="9.1 参数传递"></a>9.1 参数传递</h2><p><strong>传递方法1</strong></p>
<blockquote>
<p><code>&lt;a&gt;</code>标签配合 <code>queryString</code> 传递参数, 这个和前端一致</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/src/home/index.html?key=2333"</span>&gt;</span>跳转页面<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 添加变量参数 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/PageParams/receiveparams?key=&#123;&#123;title&#125;&#125;"</span>&gt;</span>携带参数key2跳转<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>传递方法2</strong></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// 导入模块</span><br><span class="line">import router from &apos;@system.router&apos;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>通过 <code>router</code> 接口：<code>router.push()</code>, <code>router.replace()</code>, 接受一个如下结构的对象，用法这个和前端 <code>router</code> 一致。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  url: <span class="string">'/src/home/index.html'</span>,</span><br><span class="line">  params: &#123; <span class="attr">key</span>: <span class="number">2333</span> <span class="comment">/* 需要传递的参数 */</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>接收参数</strong></p>
<blockquote>
<p>上述2种传递参数的方法，其接收方法一致，在接收参数页面的 <code>protected</code>对象中获取即可（可设置默认值）</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">   protected: &#123;</span><br><span class="line">     key: <span class="string">''</span></span><br><span class="line">   &#125;,</span><br><span class="line">   onInit () &#123;</span><br><span class="line">     <span class="keyword">this</span>.$page.setTitleBar(&#123; <span class="attr">text</span>: <span class="string">'接收参数'</span> &#125;)</span><br><span class="line"></span><br><span class="line">     <span class="comment">// js中输出页面传递的参数</span></span><br><span class="line">     <span class="built_in">console</span>.info(<span class="string">'key: '</span> + <span class="keyword">this</span>.key)</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<p><strong>回传参数</strong></p>
<blockquote>
<p>开发者可能会遇到需要在页面之间回传参数的需求</p>
</blockquote>
<ul>
<li>假设存在页面A和页面B，先从页面A跳转至页面B，然后从页面B返回到页面A时，需要传递参数<br>= 此时，组件a和接口router传参不能满足需求，可以借助于app级别的对象：this.$app.$data</li>
</ul>
<blockquote>
<p>页面A实现代码如下</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tutorial-page"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/PageParams/returnParams/pageb"</span>&gt;</span>跳转到页面B<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span>&gt;</span>&#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.tutorial-page</span> &#123;</span></span><br><span class="line">    flex-direction: column;</span><br><span class="line">    justify-content: center;</span><br><span class="line">    align-items: center;</span><br><span class="line">  &#125;</span><br><span class="line">  a &#123;</span><br><span class="line">    margin-top: 75px;</span><br><span class="line">    font-size: 30px;</span><br><span class="line"><span class="css">    <span class="selector-tag">color</span>: <span class="selector-id">#09ba07</span>;</span></span><br><span class="line">    text-decoration: underline;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    private: &#123;</span><br><span class="line"><span class="javascript">      msg: <span class="string">''</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    onInit () &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$page.setTitleBar(&#123; <span class="attr">text</span>: <span class="string">'页面A'</span> &#125;)</span></span><br><span class="line">    &#125;,</span><br><span class="line">    onShow () &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 页面被切换显示时，从数据中检查是否有页面B传递来的数据</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">if</span> (<span class="keyword">this</span>.$app.$data.dataPageB &amp;&amp; <span class="keyword">this</span>.$app.$data.dataPageB.gotoPage === <span class="string">'pageA'</span>) &#123;</span></span><br><span class="line"><span class="javascript">        <span class="comment">// 从数据中获取回传给本页面的数据</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">const</span> data = <span class="keyword">this</span>.$app.$data.dataPageB.params</span></span><br><span class="line"><span class="javascript">        <span class="keyword">this</span>.msg = data.msg</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>页面B实现代码如下：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tutorial-page"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span>&gt;</span>页面B<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">style</span>=<span class="string">"width: 450px;"</span> <span class="attr">placeholder</span>=<span class="string">"请输入回传给页面A的信息"</span> <span class="attr">onchange</span>=<span class="string">"updateMsg"</span>/&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.tutorial-page</span> &#123;</span></span><br><span class="line">    flex-direction: column;</span><br><span class="line">    justify-content: center;</span><br><span class="line">    align-items: center;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    private: &#123;</span><br><span class="line"><span class="javascript">      msg: <span class="string">''</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    onInit () &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$page.setTitleBar(&#123; <span class="attr">text</span>: <span class="string">'页面B'</span> &#125;)</span></span><br><span class="line">    &#125;,</span><br><span class="line">    onHide () &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 页面被切换隐藏时，将要传递的数据对象写入</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$app.$data.dataPageB = &#123;</span></span><br><span class="line"><span class="javascript">        gotoPage: <span class="string">'pageA'</span>,</span></span><br><span class="line">        params: &#123;</span><br><span class="line"><span class="javascript">          msg: <span class="keyword">this</span>.msg</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    updateMsg (e) &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 更新input输入的信息文本</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.msg = e.text</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="9-2-页面间通信"><a href="#9-2-页面间通信" class="headerlink" title="9.2 页面间通信"></a>9.2 页面间通信</h2><blockquote>
<p><a href="https://doc.quickapp.cn/framework/script.html" target="_blank" rel="noopener">https://doc.quickapp.cn/framework/script.html</a></p>
</blockquote>
<blockquote>
<p>会利用到一个构造函数 <code>new BroadcastChannel(string)</code>, 它接受一个字符串参数，作为实例的频道名称。它的实例具有以下属性和方法</p>
</blockquote>
<ul>
<li><code>name</code> 频道名称,区分不同的消息频道(注意：不同频道之间不可通信)。</li>
<li><code>postMessage</code> 用于在当前频道中广播消息</li>
<li><code>onmessage</code> 订阅消息。在频道中接收到广播消息之后，会给所有订阅者派发消息事件</li>
<li><code>close</code> 关闭当前的频道</li>
</ul>
<blockquote>
<p>其中 <code>onmessage</code> 事件有2个属性(通过 <code>event</code> 对象访问)</p>
</blockquote>
<ul>
<li><code>type</code> message</li>
<li><code>data</code> 接收到的消息内容</li>
</ul>
<h1 id="十、组件通信"><a href="#十、组件通信" class="headerlink" title="十、组件通信"></a>十、组件通信</h1><p><strong>父组件到子组件</strong></p>
<ul>
<li>子组件通过 <code>props</code> 获取父组件传入的值，见上文 template 部分</li>
<li>通过 <code>this.watch(props, callback)</code> 监控传入数据变化并调用回调函数</li>
<li>父组件通过<code>this.$broadcast()</code>完成事件触发，子组件通过<code>$on()</code>绑定事件并响应</li>
</ul>
<p><strong>子组件到父组件</strong></p>
<ul>
<li>父子组件传对象类型属于引用传递，可以直接修改父组件传入对象改变父组件数据</li>
<li>子组件通过<code>this.$dispatch()</code>完成事件触发，父组件通过<code>$on()</code>绑定事件并响应</li>
<li>子组件通过<code>this.$emit()</code>触发在节点上绑定的事件来执行父组件的方法</li>
</ul>
<blockquote>
<ul>
<li>注：<code>this.$broadcast()</code>、<code>this.$emit()</code> 和 <code>this.$dispatch()</code>参数一致</li>
<li>注：触发时传递参数，再接收时使用<code>event.detail</code>来获取参数</li>
<li>注：当传递结束后，可以调用<code>event.stop()</code>来结束传递</li>
</ul>
</blockquote>
<h1 id="十一、Deeplink"><a href="#十一、Deeplink" class="headerlink" title="十一、Deeplink"></a>十一、Deeplink</h1><blockquote>
<p>配合<code>&lt;web&gt;</code>标签框架支持通过链接从外部打开应用，格式</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">http:<span class="comment">//hapjs.org/app/&lt;package&gt;/[path][?key=value]</span></span><br><span class="line">https:<span class="comment">//hapjs.org/app/&lt;package&gt;/[path][?key=value]</span></span><br><span class="line">hap:<span class="comment">//app/&lt;package&gt;/[path][?key=value]</span></span><br></pre></td></tr></table></figure>
<ul>
<li><code>package</code>: 应用包名，必选</li>
<li><code>path</code>: 应用内页面的<code>path</code>，可选，默认为首页</li>
<li><code>key-value</code>: 希望传给页面的参数，可选，可以有多个</li>
</ul>
<blockquote>
<p>从传统网页调起需引入以下脚本</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;script src=&apos;//statres.quickapp.cn/quickapp/js/routerinline.min.js&apos;/&gt;</span><br></pre></td></tr></table></figure>
<h1 id="十二、事件监听与触发"><a href="#十二、事件监听与触发" class="headerlink" title="十二、事件监听与触发"></a>十二、事件监听与触发</h1><blockquote>
<p><code>$on</code> 用于监听自定义事件；<code>$off</code>移除对应的事件监听</p>
</blockquote>
<p><strong>$on(evtName, fnHandler)</strong></p>
<blockquote>
<p>在当前页面注册监听事件， 可监听<code>$emit()</code>、 <code>$dispatch()</code>、 <code>$broadcast()</code>等触发的自定义事件，不能用于注册组件节点的事件响应</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    onInit()&#123;</span><br><span class="line">      <span class="keyword">this</span>.$on(<span class="string">'customEvtType1'</span>, <span class="keyword">this</span>.customEvtType1Handler)</span><br><span class="line">    &#125;,</span><br><span class="line">    customEvtType1Handler(evt)&#123;</span><br><span class="line">      <span class="comment">// 事件类型，事件参数</span></span><br><span class="line">      <span class="built_in">console</span>.info(<span class="string">`触发事件：类型：<span class="subst">$&#123;evt.type&#125;</span>, 参数： <span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(evt.detail)&#125;</span>`</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p><strong>$off(evtName, fnHandler)</strong></p>
<blockquote>
<p>移除事件监听，参数 fnHandler 为可选，传递仅移除指定的响应函数，不传递则移除此事件的所有监听</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    removeEventHandler () &#123;</span><br><span class="line">      <span class="comment">// 不传递fnHandler：移除所有监听</span></span><br><span class="line">      <span class="keyword">this</span>.$off(<span class="string">'customEvtType1'</span>)</span><br><span class="line">      <span class="comment">// 传递fnHandler：移除指定的监听函数</span></span><br><span class="line">      <span class="keyword">this</span>.$off(<span class="string">'customEvtType1'</span>, <span class="keyword">this</span>.customEvtType1Handler)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p><strong>触发ViewModel事件</strong></p>
<blockquote>
<p>页面的交互中可能会遇到一些非手动触发的需求，$emit() 通过触发当前实例上的事件达到动态触发事件的行为</p>
</blockquote>
<p><strong>$emit(evtName, evtDetail)</strong></p>
<ul>
<li>触发当前实例监听事件函数，与 <code>$on()</code> 配合使用</li>
<li>注意：<code>$emit()</code> 目前只触发 <code>$on</code> 所监听的事件</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    emitEvent () &#123;</span><br><span class="line">      <span class="keyword">this</span>.$emit(<span class="string">'customEvtType1'</span>, &#123; <span class="attr">params</span>: <span class="string">'参数内容'</span> &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p><strong>监听原生组件事件</strong></p>
<ul>
<li>原生组件支持一系列事件，如通用事件（如：click, disappear）、组件专有事件（如：focus）</li>
</ul>
<blockquote>
<ul>
<li>在响应函数执行时通过target获取，如：onClickHandler</li>
<li>在响应函数绑定时传递参数，如：onClickHandler2</li>
</ul>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tutorial-page"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">id</span>=<span class="string">"elNode1"</span> <span class="attr">class</span>=<span class="string">"&#123;&#123; elClassName + 1 &#125;&#125;"</span> <span class="attr">disabled</span>=<span class="string">"false"</span> <span class="attr">onclick</span>=<span class="string">"onClickHandler"</span>&gt;</span>组件节点1<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">id</span>=<span class="string">"elNode2"</span> <span class="attr">class</span>=<span class="string">"class-static-1 &#123;&#123; elClassName + 2 &#125;&#125;"</span> <span class="attr">onclick</span>=<span class="string">"onClickHandler2('参数1', argName)"</span>&gt;</span>组件节点2<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"less"</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.tutorial-page</span> &#123;</span></span><br><span class="line">    flex-direction: column;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    private: &#123;</span><br><span class="line"><span class="javascript">      elClassName: <span class="string">'class-dynamic'</span>,</span></span><br><span class="line"><span class="javascript">      argName: <span class="string">'动态参数'</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    onClickHandler (evt) &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 事件类型，参数详情</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.info(<span class="string">`触发事件：类型：<span class="subst">$&#123;evt.type&#125;</span>, 详情： <span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(evt.detail)&#125;</span>`</span>);</span></span><br><span class="line"></span><br><span class="line">      if (evt.target) &#123;</span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.info(<span class="string">`触发事件：节点：<span class="subst">$&#123;evt.target.id&#125;</span>, <span class="subst">$&#123;evt.target.attr.disabled&#125;</span>`</span>)</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    onClickHandler2 (arg1, arg2, evt) &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 事件类型，事件参数，target</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.info(<span class="string">`触发事件：类型：<span class="subst">$&#123;evt.type&#125;</span>, 参数： <span class="subst">$&#123;arg1&#125;</span>, <span class="subst">$&#123;arg2&#125;</span>`</span>);</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>触发原生组件事件</strong></p>
<blockquote>
<p>通过<code>$emitElement()</code>完成事件的动态触发</p>
</blockquote>
<ul>
<li><strong>$emitElement(evtName, evtDetail, id)</strong></li>
</ul>
<blockquote>
<p>可以触发指定组件<code>id</code>的事件，通过<code>evt.detail</code>获取传递的参数；该方法对自定义组件无效</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tutorial-page"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">onclick</span>=<span class="string">"emitElement"</span>&gt;</span>触发组件节点的事件：click<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">id</span>=<span class="string">"elNode1"</span> <span class="attr">class</span>=<span class="string">"&#123;&#123; elClassName + 1 &#125;&#125;"</span> <span class="attr">disabled</span>=<span class="string">"false"</span> <span class="attr">onclick</span>=<span class="string">"onClickHandler"</span>&gt;</span>组件节点1<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span> <span class="attr">id</span>=<span class="string">"elNode2"</span> <span class="attr">class</span>=<span class="string">"class-static-1 &#123;&#123; elClassName + 2 &#125;&#125;"</span> <span class="attr">onclick</span>=<span class="string">"onClickHandler2('参数1', argName)"</span>&gt;</span>组件节点2<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">"less"</span>&gt;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.tutorial-page</span> &#123;</span></span><br><span class="line">    flex-direction: column;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    private: &#123;</span><br><span class="line"><span class="javascript">      elClassName: <span class="string">'class-dynamic'</span>,</span></span><br><span class="line"><span class="javascript">      argName: <span class="string">'动态参数'</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    onClickHandler (evt) &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 事件类型，参数详情</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.info(<span class="string">`触发事件：类型：<span class="subst">$&#123;evt.type&#125;</span>, 详情： <span class="subst">$&#123;<span class="built_in">JSON</span>.stringify(evt.detail)&#125;</span>`</span>);</span></span><br><span class="line"></span><br><span class="line">      if (evt.target) &#123;</span><br><span class="line"><span class="javascript">        <span class="built_in">console</span>.info(<span class="string">`触发事件：节点：<span class="subst">$&#123;evt.target.id&#125;</span>, <span class="subst">$&#123;evt.target.attr.disabled&#125;</span>`</span>)</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    onClickHandler2 (arg1, arg2, evt) &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 事件类型，事件参数，target</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.info(<span class="string">`触发事件：类型：<span class="subst">$&#123;evt.type&#125;</span>, 参数： <span class="subst">$&#123;arg1&#125;</span>, <span class="subst">$&#123;arg2&#125;</span>`</span>);</span></span><br><span class="line">    &#125;,</span><br><span class="line">    emitElement () &#123;</span><br><span class="line"><span class="javascript">      <span class="comment">// 注意：通过此类方式的事件不会携带target属性，开发者可以通过detail参数实现</span></span></span><br><span class="line"><span class="javascript">      <span class="keyword">this</span>.$emitElement(<span class="string">'click'</span>, &#123; <span class="attr">params</span>: <span class="string">'参数内容'</span> &#125;, <span class="string">'elNode1'</span>)</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="十三、打包及发布"><a href="#十三、打包及发布" class="headerlink" title="十三、打包及发布"></a>十三、打包及发布</h1><h2 id="13-1-编译工具"><a href="#13-1-编译工具" class="headerlink" title="13.1 编译工具"></a>13.1 编译工具</h2><p><strong>1）编译打包工程</strong></p>
<ul>
<li>在工程的根目录下运行</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>
<ul>
<li>编译后的工程目录在<code>/build</code></li>
<li>生成的应用路径为<code>/dist/.rpk</code></li>
</ul>
<p><strong>2）增加 release 签名</strong></p>
<blockquote>
<p>通过 <code>openssl</code> 命令等工具生成签名文件<code>private.pem</code>、<code>certificate.pem</code>，例如：</p>
</blockquote>
<blockquote>
<p><a href="https://doc.quickapp.cn/tools/compiling-tools.html" target="_blank" rel="noopener">https://doc.quickapp.cn/tools/compiling-tools.html</a></p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">opensslreq -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -outcertificate.pem</span><br></pre></td></tr></table></figure>
<blockquote>
<p>在工程的 <code>sign</code> 目录下创建 <code>release</code> 目录，将私钥文件 <code>private.pem</code> 和证书文件 <code>certificate.pem</code> 拷贝进去</p>
</blockquote>
<p><strong>3）发布程序包</strong></p>
<blockquote>
<p>发布程序包前需要增加<code>release</code>签名，然后在工程的根目录下运行</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm run release</span><br></pre></td></tr></table></figure>
<ul>
<li>生成的应用路径为<code>/dist/.release.rpk</code></li>
<li>如果需要临时使用 <code>debug</code> 签名，可以使用</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm run release -- --debug</span><br></pre></td></tr></table></figure>
<h2 id="13-2-IDE发布"><a href="#13-2-IDE发布" class="headerlink" title="13.2 IDE发布"></a>13.2 IDE发布</h2><ul>
<li>1）生成证书。点击快应用面板的【生成证书】按钮, 按提示输入相关信息</li>
<li>2）生成发布用 <code>RPK</code>。点击【发布 <code>rpk</code>包】按钮, 生成成功的话会弹出对应的文件夹</li>
</ul>
<p><img src="https://bbs.quickapp.cn/data/attachment/forum/201812/15/182933kudoghhmnj8vc4ms.png" alt></p>
<h1 id="十四、快应用分享专题"><a href="#十四、快应用分享专题" class="headerlink" title="十四、快应用分享专题"></a>十四、快应用分享专题</h1><p><img src="https://bbs.quickapp.cn/data/attachment/forum/201812/12/143505moccppi1ofo6b16a.png" alt></p>
<h1 id="十五、上传到快应用中心审核"><a href="#十五、上传到快应用中心审核" class="headerlink" title="十五、上传到快应用中心审核"></a>十五、上传到快应用中心审核</h1><blockquote>
<p>快应用注册账号 <a href="https://www.quickapp.cn/docCenter/post/74" target="_blank" rel="noopener">https://www.quickapp.cn/docCenter/post/74</a></p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/410.png" alt></p>
<h1 id="十六、一些问题"><a href="#十六、一些问题" class="headerlink" title="十六、一些问题"></a>十六、一些问题</h1><ul>
<li>资源文件、代码文件的命名均不能含有中文，命名不能连续使用下划线，否则打包发布时会包解析失败，导致无法上传</li>
<li>自定义属性名不能采用驼峰命名，否则值永远是 <code>undefined</code></li>
<li><code>show</code> 属性并不好用，没起什么作用</li>
<li>类似 <code>onInit</code> 等等函数是页面生命周期，不是组件生命周期，不会因为组件状态变化而执行</li>
<li><code>display</code>类型只有 <code>flex</code> 和 <code>none</code></li>
<li>子盒子不能将父盒子撑高</li>
<li>不遵循盒子模型，类似但不完全等同于 <code>border-box</code></li>
<li>不能全局引用样式，只能在每个<code>page</code>中使用<code>@import</code>引入</li>
<li><code>&lt;block&gt;</code>逻辑控制块，仅支持<code>for</code>和<code>if/elif/else</code>，不支持<code>show</code>条件渲染</li>
<li><code>justify-content</code>属性，在快应用官方开发环境中，目前不支持<code>space-around</code></li>
<li>针对于目前<code>vscode</code>插件<code>hap-extension</code>不支持<code>sass</code>语法，可以把<code>.scss</code>单独存储，通过<code>style.src</code>引入到<code>.ux</code>中，同时方便管理</li>
<li>当前自定义组件不支持传入的<code>props</code>为<code>function</code></li>
<li>快应用中很多 <code>html</code>都不能用，比如没有 <code>p</code>,<code>h1~h2</code> 等，因为它只是模拟了部分 <code>html</code>标签,最终会转化成原生组件</li>
<li>只能使用 <code>a</code>、<code>span</code>、<code>text</code>、<code>label</code> 放置文本内容</li>
<li><code>position</code> 只能是 <code>fixed</code> 或 <code>none</code></li>
<li>长度单位只有 <code>px</code>和<code>%</code></li>
</ul>
<h1 id="十七、快应用开发资源"><a href="#十七、快应用开发资源" class="headerlink" title="十七、快应用开发资源"></a>十七、快应用开发资源</h1><h2 id="官方资讯"><a href="#官方资讯" class="headerlink" title="官方资讯"></a>官方资讯</h2><ul>
<li><a href="http://bbs.quickapp.cn/posts/detail?id=308" target="_blank" rel="noopener">十大手机厂商共推快应用标准，发布会完美落幕</a></li>
<li><a href="https://mp.weixin.qq.com/s/7zPwdXRAl7SIoFw4eKhXyA" target="_blank" rel="noopener">教你尝鲜「快应用」！体验秒开，如丝般顺滑！</a></li>
<li><a href="http://bbs.quickapp.cn/posts/detail?id=446" target="_blank" rel="noopener">快应用+小程序，99%的Android程序员即将失业！</a></li>
</ul>
<h2 id="官方文档"><a href="#官方文档" class="headerlink" title="官方文档"></a>官方文档</h2><ul>
<li><a href="https://doc.quickapp.cn/" target="_blank" rel="noopener">入门教程</a></li>
<li><a href="https://doc.quickapp.cn/features/" target="_blank" rel="noopener">接口文档</a></li>
<li><a href="https://doc.quickapp.cn/framework/" target="_blank" rel="noopener">框架文档</a></li>
<li><a href="https://www.quickapp.cn/" target="_blank" rel="noopener">官方网站</a></li>
<li><a href="http://bbs.quickapp.cn/" target="_blank" rel="noopener">官方论坛</a></li>
<li><a href="https://doc.quickapp.cn/tools/toolkit-tools.html" target="_blank" rel="noopener">toolkit</a></li>
<li><a href="https://doc.quickapp.cn/tools/compiling-tools.html" target="_blank" rel="noopener">编译工具</a></li>
<li><a href="https://doc.quickapp.cn/tools/debugging-tools.html" target="_blank" rel="noopener">调试工具</a></li>
</ul>
<h2 id="工具"><a href="#工具" class="headerlink" title="工具"></a>工具</h2><ul>
<li><a href="https://github.com/wuxinzhe/Quix" target="_blank" rel="noopener">Quix - UI for Quick App</a></li>
<li><a href="https://github.com/xiaomak/quickapp-weui" target="_blank" rel="noopener">基于weui开发的quickapp</a></li>
<li><a href="http://quickapp.dcloud.io/#wxconvert" target="_blank" rel="noopener">快应用转换工具 - 小程序转快应用</a></li>
<li><a href="https://segmentfault.com/a/1190000013984402?utm_source=tag-newest" target="_blank" rel="noopener">flyio - 支持快应用的http网络库</a></li>
</ul>
<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><ul>
<li><a href="https://github.com/ColorfulCat/quickapp_gank" target="_blank" rel="noopener">Gank客户端</a></li>
<li><a href="https://github.com/Licoy/quickapp-neihanchezhan" target="_blank" rel="noopener">内涵车站APP</a></li>
<li><a href="https://github.com/CB-ysx/wanandroid-quickapp" target="_blank" rel="noopener">wanandroid快应用</a></li>
<li><a href="https://github.com/hjl19911127/quickapp-douban" target="_blank" rel="noopener">quickapp-douban</a></li>
<li><a href="https://github.com/yale8848/quickapp-wechat" target="_blank" rel="noopener">快应用版Wechat</a></li>
</ul>
<h2 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h2><ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=yupeng528.hap" target="_blank" rel="noopener">Vscode Hap Extension–轻应用语法高亮插件</a></li>
<li><a href="https://github.com/hatedMe/QuickApp-For-Highlighter" target="_blank" rel="noopener">Vscode 一个基于vscode应用于‘快应用’语法高亮</a></li>
<li><a href="https://github.com/hatedMe/beautify-quick-app" target="_blank" rel="noopener">Vscode Quick App美化代码</a></li>
</ul>
<h2 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h2><ul>
<li><a href="https://juejin.im/post/5ab26a1e6fb9a028b547c675" target="_blank" rel="noopener">对标小程序 ? “快应用”开发入门指南 By鸿洋</a></li>
<li><a href="https://juejin.im/post/5ab27d8e518825557e78485e" target="_blank" rel="noopener">快应用快速入门教程 by大大花猫</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/34774751" target="_blank" rel="noopener">快应用 QuickApp–入门指北</a></li>
<li><a href="https://github.com/williamfzc/QuickAppLearner" target="_blank" rel="noopener">快应用简明使用指引</a></li>
<li><a href="https://www.cnblogs.com/simleSmith/p/8618256.html" target="_blank" rel="noopener">快应用QuickApp–HelloWorld体验</a></li>
<li><a href="https://segmentfault.com/a/1190000014012762?utm_source=tag-newest" target="_blank" rel="noopener">快应用快速入门教程 by五个半柠檬(SF)</a></li>
</ul>
<h2 id="讨论"><a href="#讨论" class="headerlink" title="讨论"></a>讨论</h2><ul>
<li><a href="https://www.zhihu.com/question/268663484/answer/343010272" target="_blank" rel="noopener">「快应用」项目？会对微信小程序以及 App 生态有何影响？(知乎)</a></li>
<li><a href="https://www.zhihu.com/question/268675437/answer/343249351" target="_blank" rel="noopener">如何看待国内几家硬件厂商联合鼎力打造的快应用?(知乎)</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/34796337" target="_blank" rel="noopener">九大厂商联合推出「快应用」，围攻微信？(知乎)</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/34877700" target="_blank" rel="noopener">腾讯“小程序”与手机“快应用”之战(知乎)</a></li>
</ul>
<h2 id="分享"><a href="#分享" class="headerlink" title="分享"></a>分享</h2><ul>
<li><a href="https://juejin.im/post/5ab119ef51882555712c3372" target="_blank" rel="noopener">饿了么快应用初体验</a></li>
<li><a href="https://segmentfault.com/a/1190000013915359" target="_blank" rel="noopener">是前端还是Android？快应用 快速入门与初步分析</a></li>
<li><a href="https://juejin.im/post/5ab378235188255574599cc4" target="_blank" rel="noopener">快应用初体验</a></li>
<li><a href="https://mp.weixin.qq.com/s/44SX9k1tbAtqhaxP-OwosQ" target="_blank" rel="noopener">[前端工坊]快应用-技术调研</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/34985022" target="_blank" rel="noopener">快应用发起进攻第一枪！小米直达服务正式更名快应用</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/34984080" target="_blank" rel="noopener">手机厂商和开发者为何看好快应用新生态</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/35007620" target="_blank" rel="noopener">魅族体验快应用：免安装，快速触达你要的服务</a></li>
</ul>
<ul>
<li><a href="https://bbs.quickapp.cn/forum.php?mod=viewthread&amp;tid=838" target="_blank" rel="noopener">资源汇总 快应用开发常见问题和技术帖子汇总（持续更新）</a></li>
<li><a href="https://github.com/l455202325/APIDemo" target="_blank" rel="noopener">快应用API Demo 集合 QuickAPP</a></li>
</ul>
<blockquote>
<p>更多详情 <a href="https://github.com/yesvods/awesome-quick-app" target="_blank" rel="noopener">https://github.com/yesvods/awesome-quick-app</a></p>
</blockquote>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2018/08/18/javaScript-arr-summary/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2018/08/26/vue-start/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
